This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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.

    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
    Transcript

    Transcript

    00:00 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.

    00:11 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.

    00:31 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."

    00:46 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.

    01:09 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.

    01:24 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.

    Discuss

    Discuss