Simplifying Nested Async Subscriptions in Angular: A Practical Example

One way to subscribe to observable in Angular is async pipe into the HTML template. It is easy but when you have several subscription use ng-container with *ngIf is a common solution, like :

<ng-container *ngIf="userAuth$ | async as user">
    <span column-1 class="licence-name">
        {{user.role}}
    </span>
    <ng-container *ngIf="domains$ | async as domains">
      <ul *ngFor="let domain in domains">
        <li>{{domain}}</li>
    </ng-container>
<ng-container *ngIf="ads$ | async as ads">
       <div *ngFor="let ad in ads">
           {{ad.name}}
       <div>
</ng-container>
<ng-container 
</ng-container>

Using Object

The ng-contanier generate too noise into the DOM, but we can simplify using object into a single *ngIf and grouping each subscription into it object like:

<ng-container *ngIf="{
    user: userAuth$ | async,
    domains: domains$ | async
} as state ">
    <span column-1 class="licence-name">
        {{state.user.role}}
    </span>
      <ul *ngFor="let domain in state.domains">
        <li>{{domain}}</li>
      </ul>
</ng-container>

Hopefully, that will give you a bit to help you avoid nested *ngIf for an observable subscription.

If you enjoyed this post, share it.