@ViewChildren(TemplateRef) is undefined for <template> elements

Question

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.

Answer 1

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.

Plunker example