This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Generate and Render Angular 2 Template Elements in a Component

1:25 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?