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

Viewed 35338

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?

2 Answers

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

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