I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

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

After an offline/online device state change, I call ChildComponent's method to update a list of items it returns.

@ViewChild(ChildComponent) childComponent: ChildComponent;

ngOnInit(): void {
    thisworkService.connectSubscription(() => {
        this.childComponent.getItems();
    });
}

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

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

Thanks for your help.

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

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

After an offline/online device state change, I call ChildComponent's method to update a list of items it returns.

@ViewChild(ChildComponent) childComponent: ChildComponent;

ngOnInit(): void {
    thisworkService.connectSubscription(() => {
        this.childComponent.getItems();
    });
}

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

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

Thanks for your help.

• javascript
• angular
• ionic2
• angular2-ponents

1 Answer 1

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

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