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
Become a member
to unlock all features

Level Up!

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


    Use Template Elements in Angular

    John LindquistJohn Lindquist

    The <template> element is a core piece of building complex UI in Angular. You can get a reference to these elements, then pass them around and create new elements based on them.



    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




    Template elements are major building blocks of Angular 2. I'm talking about this template, where it's the actual element. Not this keyword template that's on the component decorator.

    This template, if I put anything inside of it, and say, "This is content inside a template," and I hit save. You'll see this basic is used in here. You'd expect this to show up in any other element, except in a template element, browsers don't render template elements.

    You can actually grab a ref to this. I'll say foo. Then, programmatically, in the basic component we can look up that template using ViewChild and say, "I want foo, and I know that's a template."

    This is essentially querying for this, and getting this referenced to the template. As long as we have from there, as long as we have the view container ref to the element itself, we can go ahead and just use the lifecycle hook to just use the view to create an embedded view of the template.

    You'll see, we've now rendered out this template inside of my app basic. This is content inside a template. We can actually do that multiple times so that it renders out as many times as we need it.

    This approach, though, does require you to manually create a template, and have a component with that template in it, we can look it up, and use that to create the embedded view.