How can I get a collection of all templates (TemplateRef) inside a component? It works fine with ViewChild but ViewChildren is undefined...
I use a solution from this question. Plunker with the full example.
@Component({
selector: 'my-app',
template: `
<div>
<template #model>...</template>
<template #color>...</template>
</div>`
})
export class App {
@ViewChild('model') model;
@ViewChild('color') color;
@ViewChildren(TemplateRef) templates: QueryList<TemplateRef>;
ngAfterContentInit() {
console.log(this.templates); // undefined
console.log(this.model); // TemplateRef_ {...}
}
}
I need templates for a grid component where it's possible to define templates for columns. Unfortunately ng-content doesn't support dynamic projection, so I'm trying to achieve it with templates.
If you move console.log('child', this.templates); to ngAfterViewInit() then it works.
ngAfterViewInit() {
console.log('child', this.templates);
}
I had expected it to work in ngAfterContentInit() as well. It seems in this Angular version ngAfterContentInit() runs before ngAfterViewInit(). I was sure this was the other way around earlier.
You need implements ChangeDetectorRef.detectChanges(); in the end of function of any Children