El conocimiento es el nuevo dinero.
Aprender es la nueva manera en la que inviertes
Acceso Cursos

Simplificar Multiples Suscripciones *async

· 1 min de lectura
Simplificar Multiples Suscripciones *async

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!

Plataforma de cursos gratis sobre programación