ng-content

ng-content

Simplificar Multiples Suscripciones *async

Photo by John Barkiple on Unsplash

Simplificar Multiples Suscripciones *async

Como simplificar async anidados en template de angular

Dany Paredes's photo
Dany Paredes
·Oct 10, 2022·

1 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

  • Usando un Objeto

Una forma de suscribirse a observables en Angular es async pipe en la plantilla HTML. Es fácil, pero cuando tienes varias suscripciones, usar ng-container con *ngIf es una solución común, como:

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

Usando un Objeto

El ng-contanier genera demasiado ruido en el DOM, pero podemos simplificar el uso del objeto en un solo *ngIf y agrupar cada suscripción en el objeto como:

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

Con suerte, te ayuda con los *ngIf anidados para una suscripción observable.

¡Si te gusta no dudes en compartirlo!

 
Share this