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-28 15:33:43Z

350

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, 2019 at 15:33

answered Oct 20, 2016 at 22:39

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sam Alexander Over a year ago

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?

DavidGSola Over a year ago

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

elporfirio Over a year ago

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?

BeetleJuice Over a year ago

@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

rmcsharry Over a year ago

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.

|

silentsod · Accepted Answer · 2016-10-20 22:20:52Z

85

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

answered Oct 20, 2016 at 22:20

silentsod

8,35545 silver badges41 bronze badges

Comments

Daniel Gerber · Accepted Answer · 2024-08-16 11:28:14Z

0

as the original question asked for @ViewChild and not @ViewChildren let me add a solution which I'm frequently using in angular v18.

template

<aComponent #componentId></aComponent >

component

@ViewChild('componentId', { read: AComponent }) aComponent: AComponent | undefined;

answered Aug 16, 2024 at 11:28

Daniel Gerber

3,4803 gold badges27 silver badges32 bronze badges

Collectives™ on Stack Overflow

Access multiple viewchildren using @viewchild

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related