How can I get children elements from QueryList in Angular 2?

Question

I am newbie at Angular2. In my view I have few identical children that are generated in *ngFor.

<ngb-panel *ngFor="let client of clients" [title]="'Client #' + client.id">     <template ngbPanelContent>         <processing-item [client]="client"></processing-item>     </template> </ngb-panel> 

I need to call methods of these components at parent element and find out the ViewChildren decorator and the code is:

@ViewChildren(ProcessingItemComponent) processingItems: QueryList<ProcessingItemComponent>; 

Then I try to iterate them by forEach:

ngAfterViewInit() {     this.processingItems.forEach(function (el) {         console.log(el);     }); } 

But it does nothing. toArray() method called on QueryList returns empty array.

Any suggestions how can I get all children components at one time and call its methods?

Answer 1

If clients is set from an async call (for example to the server) then the elements don't exist in ngAfterViewInit() yet.

You can use

ngAfterViewInit() {   this.processingItems.changes.subscribe(() => {     this.processingItems.toArray().forEach(el => {         console.log(el);     });   }); } 

See also https://angular.io/api/core/QueryList#changes

Answer 2

I think you should be using the @ContentChildren attribute instead of the ViewChildren.

@ContentChildren( OptionComponent ) public Options: QueryList<OptionComponent>;