W3cubDocs

NgTemplateOutlet

Experimental Directive

What it does

Inserts an embedded view from a prepared TemplateRef

How to use

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

Class Overview

class NgTemplateOutlet implements OnChanges {
  constructor(_viewContainerRef: ViewContainerRef)
  
  
  ngTemplateOutletContext : Object
  ngTemplateOutlet : TemplateRef<any>
  ngOutletContext 
  ngOnChanges(changes: SimpleChanges)
}

Selectors

[ngTemplateOutlet]

Class 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 it's 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)

Class Details

ngTemplateOutletContext : Object

ngTemplateOutlet : TemplateRef<any>

ngOutletContext

ngOnChanges(changes: SimpleChanges)

exported from common/index, defined in common/src/directives/ng_template_outlet.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html