Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NgTemplateOutlet

Inserts an embedded view from a prepared TemplateRef.

See more...

Exported from

Selectors

Properties

Property Description
@Input()
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.

@Input()
ngTemplateOutlet: TemplateRef<C> | null

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

@Input()
ngTemplateOutletInjector: Injector | null

Injector to be used within the embedded view.

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(changes: SimpleChanges)
    
Parameters
changes SimpleChanges