This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

NgTemplateOutlet

npm Package @angular/common
Module import { NgTemplateOutlet } from '@angular/common';
Source common/src/directives/ng_template_outlet.ts
NgModule CommonModule

Inserts an embedded view from a prepared TemplateRef

Overview

      
      @Directive({ selector: '[ngTemplateOutlet]' })
class NgTemplateOutlet implements OnChanges {
  ngTemplateOutletContext: Object
  ngTemplateOutlet: TemplateRef<any>
  ngOnChanges(changes: SimpleChanges)
}

How To Use

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

Selectors

      
      [ngTemplateOutlet]

Inputs

ngTemplateOutletContext bound to NgTemplateOutlet.ngTemplateOutletContext
ngTemplateOutlet bound to NgTemplateOutlet.ngTemplateOutlet

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.

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

Constructor

      
      constructor(_viewContainerRef: ViewContainerRef)

Members

      
      ngTemplateOutletContext: Object
    
      
      ngTemplateOutlet: TemplateRef<any>
    
      
      ngOnChanges(changes: SimpleChanges)