Use Template Elements in Angular

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

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.

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

Fabio Bedini
Fabio Bedini
~ 6 years ago

I think you should use ngOnInit because of both in ngAfterViewInit and ngAfterContentInit if you use binding like

<ng-template #myTemplate>
{{name}}
</ng-template>

name = 'whisher';

You get ExpressionChangedAfterItHasBeenCheckedError

Isaac Mann
Isaac Mann
~ 6 years ago

@t301000 yes, you can use ngAfterViewInit since John is accessing the <template> with @ViewChild. You would need to use ngAfterContentInit if you were accessing the <template> with @ContentChild (i.e. a parent component was passing down the <template> in the contents of the BasicComponent.

Phalgun Vaddepalli
Phalgun Vaddepalli
~ a year ago

The code for BasicComponent does work with Angular 15. It should be updated as below:

@Component({ selector: 'basic', template: <ng-template #foo> This is content inside a template </ng-template> }) export class BasicComponent{ @ViewChild('foo', {static: true}) template!: TemplateRef<any>

constructor(private view:ViewContainerRef){}

ngOnInit() { this.view.createEmbeddedView(this.template) this.view.createEmbeddedView(this.template) this.view.createEmbeddedView(this.template) } }

Markdown supported.
Become a member to join the discussionEnroll Today