This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Use Template Elements in Angular

1:33 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
t301000

Why use ngAfterContentInit ? Can I use ngAfterViewInit ?

In reply to egghead.io

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

app.component.ts

@Component({
  selector: 'basic',
  template: `
<template>
This is content inside a template
</template>
`
})
export class BasicComponent{}

@Component({
  selector: 'app',
  template: `
<basic></basic>
`
})
export class AppComponent{}

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."

@Component({
  selector: 'basic',
  template: `
<template #foo>
This is content inside a template
</template>
`
})
export class BasicComponent{
  @ViewChild('foo') 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 ViewContainer 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.

export class BasicComponent{
  @ViewChild('foo') template

  constructor(private view:ViewContainerRef){}

  ngAfterContentInit() {
    this.view.createEmbeddedView(this.template)
    this.view.createEmbeddedView(this.template)
    this.view.createEmbeddedView(this.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.

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