<ng-template>

Defines an inert template fragment rendered programmatically or by directives.

Since Angular 4+ Spec ↗

Syntax

<ng-template #ref let-ctx>...</ng-template>

Parameters

NameTypeRequiredDescription
context object No Optional context object exposed via let- bindings.

Returns

TemplateRef — A reusable template that is not rendered by default.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <ng-container *ngTemplateOutlet="tip; context: { $implicit: 'Hi' }">
    </ng-container>
    <ng-template #tip let-msg>
      <small>{{ msg }}</small>
    </ng-template>
  `,
})
export class XComponent {}

Notes

Content inside `<ng-template>` is not rendered until something instantiates it (a structural directive, ngTemplateOutlet, or a ViewContainerRef). Use `let-x` to receive context values; `$implicit` is the default. Useful for customizable slots and reusable fragments.