angular ngif statement adding more conditions

Question

I have a condition like this.

<div *ngIf="data$  | async as data; else loading">

I wanted to add additional condition into above statement, how am I able to do that?

<div *ngIf="data$ && isLoading | async as data; else loading" > error

<div *ngIf="data$ | async as data && isLoading ; else loading" > error

also for the | operator what is the name called I tried to google it but no result found. Or operator, signle line operator, line operator?

what about using parens around the observable...*ngIf="(data$ | async as data) && !isLoading ; else loading"? And the | is called pipe. — Jason White
– Jason White, Commented Mar 9, 2021 at 16:03
I tried it. The error shows Expected identifier or keyword expression expected after data and between async and as it says ) expected — logger
– logger, Commented Mar 9, 2021 at 16:06

bjdose · Accepted Answer · 2021-03-09 16:09:41Z

1

I want to suggest handling only one variable on if statements, hence you can handle only data$ as your condition to evaluate and handle the other conditions on your observable/promise.

Example:

<!-- on my template this looks cleaner -->
<div *ngIf="myObservable$  | async as data; else loading">

myObservable$ = of({}).pipe(
  map((response) => response && this.isLoading) // <- here I evaluate my conditions
)

However, if you want to evaluate your conditions on the template then you can:

<div *ngIf="(data$ | async) && isLoading; else loading">

answered Mar 9, 2021 at 16:09

bjdose

1,3099 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

angular ngif statement adding more conditions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related