With Angular, we can subscribe to an Observable and asign the result of the async pipe to another variable by doing :
*ngIf="(data$ | async) as data; else loading"
We can check multiple conditions :
*ngIf="(data1$ | async) && (data2$ | async); else loading"
But what is the correct syntax to verify multiple conditions using Angular "as" Keyword ?
I tried :
*ngIf="((data1$ | async) as data1) && ((data2$ | async) as data2); else loading"
But I have an issue :
Parser Error: Unexpected token &&, expected identifier, keyword, or string
You can use the object-like syntax.
<ng-container *ngIf="{
data1: data1$ | async,
data2: data2$ | async
} as data">
<div *ngIf="data.data1 && data.data2; else loading">
<span>{{ data.data1 }}</span>
<span>{{ data.data2 }}</span>
</div>
</ng-container>
<ng-template #loading> ... </ng-template>
Or, even better, just create a new Observable which combines the other two.
data$ = combineLatest(data1$, data2$).pipe(map(([v1, v2]) => v1 && v2));
Than, just
<div *ngIf="data$ | async; else loading">
...
</div>
<ng-template #loading> ... </ng-template>
You can try this:
<ng-container *ngIf="{ data1 :data$ | async, data2:data2$ | async} as data;">
<div *ngIf="data.data1 && data.data2; else loading">
{{data.data1}}
{{data.data2}}
</div>
<ng-template #loading>
loading..........
</ng-template>
</ng-container>
