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!