[angular] Access multiple viewchildren using @viewchild

I have created a custom component which i have placed in a for loop e.g

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

The output of which will be:

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

I would like to know how i can get a reference to these components using @viewchild syntax or any other means when the number of these components can vary

when the component can be given a name e.g

<customcomponent #compID></customcomponent>

I can then reference it as follows:

@ViewChild('compID') test: CustomComponent

How do i reference it when this is not the case e.g using an index possibly?

(This question does not relate to using ElementRef as per other questions that have been previously asked as can be seen by the answers listed below) This question relates to the accessing multiple @ViewChild and using list queries.

This question is related to angular

The answer is


Use the @ViewChildren decorator combined with QueryList. Both of these are from "@angular/core"

@ViewChildren(CustomComponent) customComponentChildren: QueryList<CustomComponent>;

Doing something with each child looks like: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

There is further documentation to be had at angular.io, specifically: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild