Why @ViewChildren does not see the second component and how to pass data async through Input?

Question

Angular

In the parent component I have:

<app-filter *ngIf="interagencyFilters.doctypes | async as doctypes" [filter]="interagencyFilters.doctypes | async"></app-filter>
<app-filter *ngIf="interagencyFilters.status | async as status" [filter]="status"></app-filter>

As you can see, the data arrives asynchronously, as soon as the data is received, the component is initialized and the data itself is transferred inside.

I'm trying to get a speaker in the generic component <app-filter>:

@ViewChildren(FilterComponent) filtersList: QueryList<FilterComponent>;
    ngAfterViewInit() {
       console.log(this.filtersList.length);
    }

console.log(this.filtersList.length);gives me always the value 1. Even though there are two components on the page.

Obviously, the problem is asynchrony. How can this be solved and how to properly pass asynchronous data to the component via @input()?

Tried to solve it like this

:

app-filter [filter]="doctypes"></app-filter>
<app-filter [filter]="status"></app-filter>

ngOnInit() {
              this.interagencyFilters.doctypes.subscribe((res) => (this.doctypes = res));
        this.interagencyFilters.status.subscribe((res) => (this.status = res));
        this.changeDetector.detectChanges();
    }

ViewChildren result is also 1

Answer 1

> `console.log(this.filtersList.length);`
Need to use https://angular.io/api/core/QueryList#changes

this.filtersList.changes.subscribe((filters) => {
   console.log(filters);
});