Help Angular by taking a 1 minute survey!Go to surveyHome

NgTemplateOutlet

Inserts an embedded view from a prepared TemplateRef.

See more...

NgModule

Selectors

Properties

Property Description
@Input()
ngTemplateOutletContext: Object
@Input()
ngTemplateOutlet: TemplateRef<any>

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>
      
      <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'}; }
      
      
  1. @Component({
  2. selector: 'ng-template-outlet-example',
  3. template: `
  4. <ng-container *ngTemplateOutlet="greet"></ng-container>
  5. <hr>
  6. <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
  7. <hr>
  8. <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
  9. <hr>
  10. <ng-template #greet><span>Hello</span></ng-template>
  11. <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
  12. <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
  13. `
  14. })
  15. export class NgTemplateOutletExample {
  16. myContext = {$implicit: 'World', localSk: 'Svet'};
  17. }

Methods

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