Access multiple viewchildren using @viewchild

Question

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.

Longboat

Answer 1

Use @ViewChildren from @angular/core to get a reference to the components

template

<div *ngFor="let v of views">
    <customcomponent #cmp></customcomponent>
</div>

component

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

l̶i̶v̶e̶ ̶d̶e̶m̶o̶

Hassett

it says ._results is a private function. Also this. components is just a singular component not a list for me. Any more help you could provide? – Akihito

@SamAlexander you can use this.components.toArray() to get the array of components with the #cmp name – Talie

How it works on Ajax response?, @ViewChildren is triggered after init View, but not after model (for ngFor) changes. How Can I trigger for that? – Echopraxia

@Echopraxia implemet AfterViewChecked and write the method ngAfterViewChecked. This method is triggered each change cycle after the view has been updated. Within it, you can test whether your viewChild instance has been defined. See the docs – Hassett

@Talie when I try this.components.toArray() i get []. Also ._results is not a function I can add on toArray(). So how do I get these children? – Kinswoman

Never mind, I found this which explains things in more detail: netbasal.com/… Using the name of the component in @ViewChildren gives a different return result than using the #name you assigned in HTML. – Kinswoman

Answer 2

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

Ermines