@angular/common

NgTemplateOutlet

directive

Inserts an embedded view from a prepared TemplateRef.

API

  
    class NgTemplateOutlet<C = unknown> implements OnChanges {}

ngTemplateOutletContext

C | null

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.

ngTemplateOutlet

TemplateRef<C> | null

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

ngTemplateOutletInjector

Injector | null

Injector to be used within the embedded view.

ngOnChanges

void

@paramchangesSimpleChanges

@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',  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    >  `,  standalone: false,})export class NgTemplateOutletExample {  myContext = {$implicit: 'World', localSk: 'Svet'};}