CODEWITHSUNDEEP
javascriptangular
mx_code
mx_code

Reputation: 2517

How to have multiple *ngIf combined with && operator and as in angular?

How can I achieve the 'as' with '&&' operator to get the following result?

*ngIf="(items$ | async as items) && (filters$ | async as filters)"

Currently this is returning a template parse error. I've tried out a bunch of variants.

Upvotes: 2

Views: 218

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71901

You can do it in these three ways:

1.

<ng-container *ngIf="items$ | async as items">
  <ng-container *ngIf="filters$ | async as filters">

  </ng-container>
</ng-container>

2.

<ng-container *ngIf="{ items: items$ | async, filters: filter$ | async } as data">
  <ng-container *ngIf="data.items && data.filters">

  </ng-container>
</ng-container>

3.

ts:

readonly filterItems$ = combineLatest([
  this.items$,
  this.filters$
]).pipe(
  map(([ items, filters ]) => ({ items, filters }))
);

<ng-container *ngIf="filterItems$ | async as filterItems"></ng-container>

With the last option you can access the items and filters like filteritems.items and filterItems.filters

Upvotes: 3

Related Questions