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