@ViewChildren (TemplateRef) - undefined for <template> elements
How can I get a collection of all templates (TemplateRef) inside a component? It works fine with ViewChild, but ViewChildren is undefined ...
I am using the solution from this question . Plunker with a complete 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 a templates
grid component where templates for columns can be defined. Unfortunately ng-content does not support dynamic projection , so I am trying to achieve it with templates.
source to share
If you move console.log('child', this.templates);
in ngAfterViewInit()
, then it works.
ngAfterViewInit() {
console.log('child', this.templates);
}
I expected it to work in ngAfterContentInit()
. It seems that in this version Angular ngAfterContentInit()
runs before ngAfterViewInit()
. I was sure it was the other way around.
source to share