Multiple Async Pipes in *ngIf


angular

Stay updated with my tutorials. Also, I will delight you with some bonus content.

For example you want to show something based on two async values. Assume, we have 2 Observables:

user$ = this.store.select(getUser);
product$ = this.store.select(getProduct);

We can show something based on both these values by using the nested ng-containers:

<ng-container *ngIf="user$ as user">
  <ng-container *ngIf="product$ as product">  
    <div>We have {{product | json}} and {{user | json}}</div>
  </ng-container>
</ng-container>

When product and user are both exist we will show the div.

comments powered by Disqus