DEV Community

Cover image for Get Addressibility to Multiple Child Components
John Peters
John Peters

Posted on

Get Addressibility to Multiple Child Components

*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

Top comments (0)