NgTemplateOutlet

Inserts an embedded view from a prepared TemplateRef.

API

class NgTemplateOutlet<C = unknown> implements OnChanges {
  constructor(_viewContainerRef: ViewContainerRef): NgTemplateOutlet<C>;
  @Input() ngTemplateOutletContext: C | null | undefined;
  @Input() ngTemplateOutlet: TemplateRef<C> | null | undefined;
  @Input() ngTemplateOutletInjector: Injector | "outlet" | null | undefined;
  protected injector: Injector;
}

constructor

NgTemplateOutlet<C>

@param_viewContainerRefViewContainerRef

@returnsNgTemplateOutlet<C>

ngTemplateOutletContext

C | null | undefined

A context object to attach to the EmbeddedViewRef. This should be an object, the object's keys will be available for binding by the local template let declarations. Using the key $implicit in the context object will set its value as default.

TemplateRef<C> | null | undefined

A string defining the template reference and optionally the context object for the template.

ngTemplateOutletInjector

Injector | "outlet" | null | undefined

Injector to be used within the embedded view. A value of "outlet" can be used to indicate that the injector should be inherited from the template outlet's location in the instantiated DOM.

injector

Injector

ngOnChanges

void

@paramchanges{ [propName: string]: SimpleChange<any>; }

@returnsvoid

Description

Inserts an embedded view from a prepared TemplateRef.

You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.

Exported by

CommonModule

Usage Notes

<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>

Using the key $implicit in the context object will set its value as default.

Example

@Component({
  selector: 'ng-template-outlet-example',
  imports: [NgTemplateOutlet],
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr />
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr />
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr />

    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name
      ><span>Hello {{ name }}!</span></ng-template
    >
    <ng-template #svk let-person="localSk"
      ><span>Ahoj {{ person }}!</span></ng-template
    >
  `,
})
export class NgTemplateOutletExample {
  myContext = {$implicit: 'World', localSk: 'Svet'};
}