Here is a code snippet I've been working on:
This snippet is written in Typescript:
isDataSearch = false;
getDatacollectionByID() {
const params = {
id: <some random ID>,
};
this.metaData = this.dataService.getDatacollectionByID(params)
.pipe(
pluck('level1', 'level2', 'level3'),
tap(() => this.isDataSearch = true),
map(metaData => [metaData]), // to be used as an array for ag grid
)
}
In the HTML template, you'll find:
<ag-grid-angular
*ngIf="isDataSearch"
[gridOptions]="dataCollectionConfig"
[rowData]="metaData | async"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>
</ag-grid-angular>
The goal here is to display the ag-grid only when the observable sequence of data is complete.
I first extract the deeply nested data using the pluck method, then reverse the boolean binding with the tap operator.
I understand that this could potentially be achieved by using the subscribe method, but I prefer to avoid it since I'm directly leveraging the async pipe within the template.