Get Addressibility to Multiple Child Components

#angular #typescript

*ngFor allows us to easily reuse components, like this:

<div *ngFor="let address of addresses">
  <app-select    
     [items]="address.cities"
     bindLabel="name"
     bindValue="id">
  </app-select>
</div>

But how do we gain addressibility to them in our Typescript code?

@ViewChildren(SelectComponent) 
   SelectComponents: 
      QueryList<SelectComponent>;

//Then in ngAfterViewInit():

  this.SelectComponents.forEach(select=>{
     debugger;
    });