{ "id": "api/common/NgTemplateOutlet", "title": "NgTemplateOutlet", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgTemplateOutletlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Inserts an embedded view from a prepared TemplateRef.

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
ngTemplateOutletContext: Object | null\n 		\n \n

A context object to attach to the EmbeddedViewRef. This should be an\nobject, the object's keys will be available for binding by the local template let\ndeclarations.\nUsing the key $implicit in the context object will set its value as default.

\n\n \n
\n \n @Input()
ngTemplateOutlet: TemplateRef<any> | null\n 		\n \n

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

\n\n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext].\n[ngTemplateOutletContext] should be an object, the object's keys will be available for binding\nby the local template let declarations.

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

Using the key $implicit in the context object will set its value as default.

\n

Examplelink

\n\n@Component({\n selector: 'ng-template-outlet-example',\n template: `\n <ng-container *ngTemplateOutlet=\"greet\"></ng-container>\n <hr>\n <ng-container *ngTemplateOutlet=\"eng; context: myContext\"></ng-container>\n <hr>\n <ng-container *ngTemplateOutlet=\"svk; context: myContext\"></ng-container>\n <hr>\n\n <ng-template #greet><span>Hello</span></ng-template>\n <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>\n <ng-template #svk let-person=\"localSk\"><span>Ahoj {{person}}!</span></ng-template>\n`\n})\nexport class NgTemplateOutletExample {\n myContext = {$implicit: 'World', localSk: 'Svet'};\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngOnChanges()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnChanges(changes: SimpleChanges)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n changes\n SimpleChanges\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }