CODEWITHSUNDEEP
angularangular-ng-if
logger
logger

Reputation: 2053

angular ngif statement adding more conditions

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?

Upvotes: 0

Views: 506

Answers (1)

bjdose
bjdose

Reputation: 1309

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">

Upvotes: 1

Related Questions