*ngIf with multiple async pipe variables
You can also use the following trick. You will need one additional nesting.
<ng-container *ngIf="{a: stream1$ | async, b: stream2$ | async, c: stream3$ | async} as o">
<ng-container *ngIf="o.a && o.b && o.c">
{{o.a}} {{o.b}} {{o.c}}
</ng-container>
</ng-container>
The object o is ever truthy, therefore the first *ngIf is simple used to save the stream values. inside you have to namespace your variables with o.
That's depend what do you want but I think forkJoin operator with a loaded flag, could be a good idea.
https://www.learnrxjs.io/operators/combination/forkjoin.html
The forkJoin wait that all Observable are completed to return their values in its subscribe
Observable.forkJoin(
Observable.of("my language").delay(1000),
Observable.of("my user").delay(1000),
).subscribe(results => {
this.language = results[0]
this.user = results[1]
})
You can catch errors into onError of the subscribe and display it.
This condition should be handled with nested ngIf
directives:
<ng-container *ngIf="language$ | async as language">
<div *ngIf="user$ | async as user">
<b>{{language}}</b> and <b>{{user}}</b>
</div>
<ng-container>
The downside is that HTTP requests will be performed in series.
In order to perform them concurrently and still have language
and user
variables, more nesting is required:
<ng-container *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
<ng-container *ngIf="userLanguage.language as language">
<ng-container *ngIf="userLanguage.user as user">
<div><b>{{language}}</b> and <b>{{user}}</b></div>
</ng-container>
</ng-container>
</ng-container>
More efficient way way to do this is to move logic from template to component class at this point and create a single observable, e.g. with withLatestFrom