Iterate over multiple instances of @ViewChild of the same angular2 component

Question

I have an Ionic 2 application with ParentComponent calling the ChildComponent @ViewChild method to run multiple ChildComponents. One of the components of ChildComponents is created twice in a view with various parameters:

<ChildComponent [startFrom]="0" [limitTo]="1"></ChildComponent> <ChildComponent [startFrom]="1" [limitTo]="1"></ChildComponent> 

After changing the state of the offline / online device, I call the ChildComponent method to update the list of returned items.

 @ViewChild(ChildComponent) childComponent: ChildComponent; ngOnInit(): void { this.networkService.connectSubscription(() => { this.childComponent.getItems(); }); } 

The problem here is: this.childComponent get only the first instance of ChildComponent from two.

Is there a way to iterate through multiple instances of the same @ViewChild component so that I can do something like this.childComponent1.getItems() and this.childComponent2.getItems() ?

Thank you for your help.

Answer 1

 @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>; 

 ngAfterViewInit(): void { this.networkService.connectSubscription(() => { this.childComponents.toArray(); }); }