Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Generate and Render Angular 2 Template Elements in a Component

    John LindquistJohn Lindquist
    angularAngular
    2 - 6

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.