Angular › Content Projection (ng-content)

How does ng-template work together with content projection to allow more flexible, conditional content?

Advanced

Answer

ng-template defines a piece of template content that is not rendered immediately by default, and a component can accept it as an input, deciding exactly when and how to render it, such as showing it conditionally or passing extra data into it, giving far more control than simple content projection alone.

@Component({
  selector: 'app-panel',
  template: `
    @if (showDetails) {
      <ng-container *ngTemplateOutlet="detailsTemplate"></ng-container>
    }
  `
})
export class PanelComponent {
  @Input() detailsTemplate!: TemplateRef<any>;
  showDetails = false;
}

Real-world example A collapsible panel component only renders its detailed content template when expanded, using ng-template and ngTemplateOutlet to avoid rendering that content at all until the user actually needs to see it.

Common follow-ups: How does passing context data into an ng-template work when rendering it with ngTemplateOutlet?;What is the difference between ng-template and simply using ng-content?

Directives;Performance & Lazy Loading