Как использовать *ngIf с Async Pipe

Чтобы вывести два Observable значения в шаблоне с *ngIf нужно сделать следующее:

<div *ngIf="product$ | async as product && price$ | async as price">
    <b>{{product}}</b> and <b>{{price}}</b>
</div>

Лучшим решением будет скомбинировать два значения можно внутри компонента используя withLatestFrom, но обязательно нужно проверять на null в шаблоне productPrice?.price.

Самым лучшим вариантом комбинации двух Observable значений будет испльзование вложенных *ngIf.

<ng-container *ngIf="product$ | async as product">
  <div *ngIf="price$ | async as price">
    <b>{{product}}</b> and <b>{{price}}</b>
  </div>
<ng-container>

При этом следует учесть, что запросы будут выполняться последовательно.

Если требуется выполнить запросы одновременно, то уровней вложенности следует добавить.

<ng-container *ngIf="{ product: product$ | async, price: price$ | async } 
              as productPrice">
  <ng-container *ngIf="productPrice.product as product">
    <ng-container *ngIf="productPrice.price as price">
      <div><b>{{product}}</b> and <b>{{price}}</b></div>
    </ng-container>
  </ng-container>
</ng-container>