Use Template Elements in Angular
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.
@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.
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) } }
I think you should use ngOnInit because of both in ngAfterViewInit and ngAfterContentInit if you use binding like
name = 'whisher';
You get ExpressionChangedAfterItHasBeenCheckedError