Angular NgTemplateOutlet Example

directive

Inserts an embedded view from a prepared TemplateRef.

See more...

Exported from

• CommonModule

Selectors

• [ngTemplateOutlet]

Properties

Property	Description
@Input()ngTemplateOutletContext: Object | 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.
@Input()ngTemplateOutlet: TemplateRef<any> | null	A string defining the template reference and optionally the context object for the template.

Description

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.

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

Methods

ngOnChanges()
ngOnChanges(changes: SimpleChanges) Parameters changes SimpleChanges