Angular 5 ngIfElse: Storing conditional result in a variable

Question

Code:

<mat-icon [ngClass]='{ rotate: !users }'>refresh</mat-icon>
<div *ngIf="usersObservable | async as users; else loading">
  ...
</div>
<ng-template #loading let-users>
  Waiting...
</ng-template>

Expected: rotate class applied to <mat-icon> while users are loading

Result: class not applied

Question: Is it possible to store/use boolean result of ngIfElse evaluation?

P.S.: In this example, I want rotate class to be applied to <mat-icon> until HTTP request completed.

Günter Zöchbauer · Accepted Answer · 2018-01-31T07:44:19.737

0

The as users variable is only in scope for bindings on or inside the tag where the *ngIf is applied.

You'd do something like

<mat-icon [ngClass]='{ rotate: !(usersObservable | async)?.users }'>refresh</mat-icon>

Ensure your observable behaves properly when subscribed to more than once. For example some of the methods mentioned in What is the correct way to share the result of an Angular Http network call in RxJs 5?

edited Jan 31 '18 at 07:44

answered Jan 31 '18 at 07:29

Günter Zöchbauer

623,577
216
2,003
1,567

Yes, this is exactly what I wanted. But it's interesting for me - is there a better way to do this? I mean without using AsyncPipe twice. – Ruslan Lekhman Jan 31 '18 at 07:43
You can do the subscribing in code and assign the response to a field in `subscribe(...)` and bind to that field instead. – Günter Zöchbauer Jan 31 '18 at 07:48
What Is the difference in efficiency between these two ways? (if it exists) – Ruslan Lekhman Jan 31 '18 at 07:54
Depends on how you implement it. Using explicit `subscribe()` is less likely to get wrong to cause 2 server requests instead of 1. If done right, I wouldn't expect a notable difference. – Günter Zöchbauer Jan 31 '18 at 07:58

Angular 5 ngIfElse: Storing conditional result in a variable

1 Answers1