Search code examples
angularmaterial-designchildviews

Angular2 @ViewChildren returns undefined in other components


Angular newbie here. After searching multiple questions I couldn't find a fix to this one: I'm trying to get the child component out of a template. It works as expected on AfterViewInit but when trying to get it from other components it won't work, returning undefined. Could you please help me figure out what I am missing? Thanks in advance and have a 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;
  }
}

Solution

  • After struggling with this and various workarounds for a couple of hours it would appear that there is a bug in material2 that is causing this.

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

    and here

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