Generate and Render Angular 2 Template Elements in a Component
Share this video with your friends
Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.
There's actually a bit of a simpler way to manage all of this, if you just want to use what's called a template inside of your template. I know, it's kind of weird working, but this template means, it's something that's not going to be rendered by the DOM.
It's just some HTML that you are going to write declaratively, and then you can reference that, and start stamping out these templates inside of your larger template, programmatically.
We'll create a ref to this, so we can grab it. I'll save -child, get that template for me please, and I'll get a reference to that template, so that's this template here. Let's put some stuff inside of here, page two, MyAmazingTemplate, followed by MyAmazingButton. Then with that template, all I have to do is...I'll get rid of this to quit moving it around, and I'll say this.container, create embedded view, this.template.
Let's change the text of the button to, "Create Template" hit Save. Now when this refreshes, I can start hitting this button and stamping out these templates beneath it. Every time it renders out a new template, based on this template we declared inside of our component template.
Hi John, this example does not work. I got ERROR TypeError: templateRef.createEmbeddedView is not a function. Does anyone have similar issues?
Use ng-template instead of template eg.
<ng-template #template>
<h2>My amazing template</h2>
<button>My amazing button</button>
</ng-template>https://stackoverflow.com/questions/47157228/angular-5-templateref-createembeddedview-is-not-a-function