Design pattern to compose different multiple Angular components together

I have a Angular6 app. The app has multiple pages. Each page is made up of multiple components. The components are basically of two types a filter component and a grid component. The filter components provide inputs on how to filter data in grid. These filter inputs can be async.

<page>
 <filter-1></filter-1>
 <filter-2></filter-2>
 <filter-3></filter-3>
 <grid filters="filtersForData"></grid>
</page>
page.component.ts
 filtersForData = [];
 callbackForFilter1(filter) { filters.push(filter)} // async
 callbackForFilter2(filter) { filters.push(filter)} // synchronous
 callbackForFilter3(filter) { filters.push(filter)} // async

Right now everything works as expected. However I would like to design the above in such a way that unless I have all the filters I should not load the grid. Reason being some calls being async in nature the grid throws ExpressionChangedAfterEvaluation Error. One thought process is too have all the filters async or not return an observable and once all observable are done then only load the grid. However this introduces another challenge of writing and maintaining observable. Also multiple filters coming in at different time will cause mutliple onChanges trigger which I want to avoid. How can the above be achieved?