Putting two async subscriptions in one Angular *ngIf statement Putting two async subscriptions in one Angular *ngIf statement angular angular

Putting two async subscriptions in one Angular *ngIf statement


You can use object as variable:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b></div>

Plunker Example

See also


The problem with using "object as variable" is that it doesn't have the same behavior as the code in the question (plus it's a mild abuse of *ngIf to have it always evaluate to true). To get the desired behavior you need:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">   <ng-container *ngIf="userLanguage.language && userLanguage.user">       <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>   </ng-container></div>


While the other solutions work, they slightly abuse the purpose of ngIf which should only optionally render a template. I've written an ngxInit directive that always renders even if the expression result is "falsy".

<div *ngxInit="{ language: language$ | async, user: user$ | async } as userLanguage">   <!-- content --></div>

see https://github.com/amitport/ngx-init