loading...
Cover image for Get Addressibility to Multiple Child Components

Get Addressibility to Multiple Child Components

jwp profile image John Peters ・1 min read

*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>
Enter fullscreen mode Exit fullscreen mode

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;
    });

Enter fullscreen mode Exit fullscreen mode

The answer is to use QueryList with @ViewChildren

Discussion

pic
Editor guide