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.

BeetleJuice · Accepted Answer · 2019-08-28T15:33:43.967

333

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̶

edited Aug 28 '19 at 15:33

answered Oct 20 '16 at 22:39

BeetleJuice

39,516
19
105
165

3

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? – Sam Alexander Mar 02 '17 at 14:58
21

@SamAlexander you can use this.components.toArray() to get the array of components with the #cmp name – DavidGSola May 09 '17 at 12:38
3

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? – elporfirio Oct 24 '17 at 16:02
1

@elporfirio 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](https://angular.io/guide/lifecycle-hooks) – BeetleJuice Oct 24 '17 at 16:40
@DavidGSola 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? – rmcsharry Oct 26 '17 at 21:26
1

Never mind, I found this which explains things in more detail: https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e Using the name of the component in @ViewChildren gives a different return result than using the #name you assigned in HTML. – rmcsharry Oct 26 '17 at 21:30

score 83 · Answer 2 · answered Oct 20 '16 at 22:20

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

Access multiple viewchildren using @viewchild

2 Answers2

Linked