Here is my code snippet:
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 HTML template:
<ag-grid-angular
*ngIf="isDataSearch"
[gridOptions]="dataCollectionConfig"
[rowData]="metaData | async"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>
</ag-grid-angular>
What I am trying to accomplish is to show the ag-grid only when the data from observable sequence is done.
I am first plucking the data which is deeply nested and then using tap
operator to reverse the boolean binding to *ngIf
.
I guess this can be fixed using subscribe method but I want to avoid it because I am using async pipe in template directly.
You can rather wait for the observable itself, async
pipe would return null
until the Observable has resolved
<ag-grid-angular
*ngIf="metaData | async as resolvedMetaData"
[gridOptions]="dataCollectionConfig"
[rowData]="resolvedMetaData"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>