Angular async pipe syntax

Question

Is there a way to factorize the

(places$ | async)

in

  <div *ngIf="(places$ | async) === undefined">Loading...</div>
  <div *ngIf="(places$ | async) === null">No data</div>
  <div *ngIf="(places$ | async) != null">{{ (places$ | async) }}</div>

I indeed store an array of places in my observable, and I need to check if the observable is either undefined or null or not empty.

Best regards,

Radik · Accepted Answer · 2020-05-05 21:45:21Z

5

you can use *ngIf to do as follow

i wrap it in {} to be sure we get data anyway and not be affected by ngIf

<ng-container *ngIf="{ data: places$ | async} as source">
  <div *ngIf="source.data === undefined">Loading...</div>
  <div *ngIf="source.data === null">No data</div>
  <div *ngIf="source.data !== undefined && data !== null">{{ source.data }}</div>
</ng-container>

edited May 5, 2020 at 21:45

answered May 5, 2020 at 21:35

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alcfeoh Over a year ago

"Loading..." is never displayed with your solution.

Radik Over a year ago

@alcfeoh it depends from source if we use new BehaviorSubject(undefined) it will, if we use Subject and do source.next(undefined) it also will show loading

Collectives™ on Stack Overflow

Angular async pipe syntax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related