angular - Angular2 @ViewChildren returns undefined in other components -

angular newbie here. after searching multiple questions couldn't find fix one: i'm trying child component out of template. works expected on afterviewinit when trying other components won't work, returning undefined. please me figure out missing? in advance , have nice day!

tab.ts

@component({   selector: 'tab',   template: `<products #productlist></products> `, }) export class tab implements afterviewinit {    @viewchildren("productlist")   public products: querylist<products>;   title: string;    ngafterviewinit(): void {     console.log(this.products.first.myform.value);   } } 

tabs.ts

@component({   selector: 'tabs',   template: `<md-tab-group>   <md-tab *ngfor="let tab of tabs let i=index" label="{{tab.title}}">  <tab></tab> <button (click)="removetab(tab)">remove tab</button> </md-tab> </md-tab-group> <button (click)="addtab()">add new tab</button>`, }) export class tabs implements afterviewinit {   tabs: tab[] = [];    ngafterviewinit(): void {     this.addtab();   }    addtab() {     var tabslength=this.tabs.length;     if (tabslength< 5) {       var tab = new tab();       tab.title = "list " + (tabslength + 1);       this.tabs.push(tab);     }     else {       console.log("cannot add new tab, limit reached");     }   }    removetab(tab: tab) {     var index = this.tabs.indexof(tab)     if (tab.products.first.isdeletable()) {       this.tabs.splice(index, 1);     }     else {       console.log("cannot remove tab!")     }   } } 

products.ts

@component({   moduleid: module.id,   selector: 'products',   templateurl: '/app/templates/products.component.html', }) export class products implements oninit {    public myform: formgroup;    constructor(private _fb: formbuilder) {   }    ngoninit(): void {     this.myform = this._fb.group({       products: this._fb.array([         this.initproduct(),       ])       , grandtotal: ['']      });     this.myform.controls['products'].valuechanges.subscribe((change) => {       this.myform.controls["grandtotal"].setvalue(this.computetotal());     });   }     initproduct() {     return this._fb.group({       name: [''],       price: ['', validators.required],       quantity: ['', validators.required],       total: [''],     });   }    isdeletable(): boolean {     const grandtotal = this.myform.controls['grandtotal'].value;     if (grandtotal > 0) {       console.log("cannot delete!")       return false;     }     return true;   } } 

after struggling , various workarounds couple of hours appear there bug in material2 causing this.

more on here: https://github.com/angular/material2/issues/1854

and here

https://github.com/angular/material2/pull/1645