Angular 2 templates have a special let
syntax that allows you to define and pass a context
when they’re being generated.
We have template:
<template #template let-description="description"> <h2>My {{description}} template</h2> <button>My {{description}} button</button> </template>
And we define 'description' variable to let data to pass into.
import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from "@angular/core"; import {WidgetThree} from "../widgets/widget-three.component"; @Component({ selector: 'home', template: ` <button (click)="onClick()">Create Template</button> <div #container></div> <template #template let-description="description"> <h2>My {{description}} template</h2> <button>My {{description}} button</button> </template> ` }) export class HomeComponent{ @ViewChild('container', {read:ViewContainerRef}) container; @ViewChild('template') template; constructor(){} onClick(){ this.container.createEmbeddedView(this.template, { description: 'sweet' }); } }