How to get variable value from QueryList?

Question

Angular

I use the following construct to access child components:

@ViewChildren(FilterComponent) filtersList: QueryList;

Inside template I have:

<button [disabled]="!filterHasChanges()">

And handler:

public filterHasChanges(): boolean {
        return this.filtersList.reduce((acc: boolean, b) => acc || b.filter.selected.length > 0, false);
    }

As you can see, I'm trying to go through all the child components and check each filter variable for b.filter.selected.length > 0

But due to the fact that the function filterHasChanges()works faster than the children build, I get an error:

TypeError: Cannot read property 'reduce' of undefined
    at OrdersExecutionSidebarComponent.filterHasChanges

How to use it correctly?

The documentation says:

Remember -
The QueryList is initialized only before the ngAfterViewInit lifecycle hook, therefore, is available only from this point.

Answer 1

buttonDisabled = this.filtersList.changes.pipe(
  map(list => list.reduce((acc: boolean, b) => acc || b.filter.selected.length > 0, false),
)

<button [disabled]="!(buttonDisabled | async)">