Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

How to simplify nested async subscriptions in Angular template

How to simplify nested async subscriptions in Angular template

Dany Paredes's photo
Dany Paredes
·Nov 14, 2020·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

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>

use 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.

Photo by John Barkiple on Unsplash

 
Share this