RxJs operators and Angular: using async pipe and tap does not populate data

Question

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.

Answer 1

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"
>

Answer 2

metaData will never be invoked in this example because isDataSearch starts off as false.

Instead, you can wrap the <ag-grid-angular> in an *ngIf that invokes the observable, and pipe the result into a new variable.

<ng-container *ngIf="metaData | async as result">
  <ag-grid-angular    
    [gridOptions]="dataCollectionConfig"
    [rowData]="result"
    [modules]="modules"
    class="ag-theme-balham data-collection-grid"
  >
  </ag-grid-angular>
</ng-container>