Correct syntax for Angular async pipe with as keyword

Question

The following structural directive will subscribe to the named observable and assign the locally scoped variable srl to the value. The content only gets rendered when the result is truthy.

<ng-container *ngIf="searchResultLength$ | async as srl">
    (search results goes here)
</ng-container>

But what is the syntax if I want to have some other type of logical operator? What I want to do is:

<ng-container *ngIf="(searchResultLength$ | async as srl) > 2">
   (search results IF there are more than 2 goes here)
</ng-container>

Which looks to me like it should the correct syntax but is rejected by the compiler. I can't find the document for how the as keyword is parsed. Can someone clue me in what the correct syntax should be?

Also, a link to the relevant documentation would help. Doing searches for the as keyword is as futile as it gets.

Perhaps (searchResultLength$ | async as srl).length > 2

Phix
– Phix

2020-03-31 22:34:07 +00:00
Commented Mar 31, 2020 at 22:34 — Phix
– Phix, Commented Mar 31, 2020 at 22:34

nash11 · Accepted Answer · 2020-03-31 22:37:01Z

5

That is, in fact, not the correct syntax. The correct syntax for ngIf is

<div *ngIf="condition as value">{{value}}</div>

The as syntax can only be used after the entire ngIf condition and stores the value that the condition evaluates to.

Here is an alternative.

<ng-container *ngIf="searchResultLength$ | async as srl">
  <ng-container *ngIf="srl > 2">
    (search results IF there are more than 2 goes here)
  </ng-container>
</ng-container>

answered Mar 31, 2020 at 22:37

nash11

8,7503 gold badges23 silver badges58 bronze badges

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

1 Comment

AlanObject Over a year ago

I had thought of that but was hoping to have only a single *ngIf evaluation. I'll mark this as the answer if nothing better comes up.

Andriy · Accepted Answer · 2020-04-01 00:12:20Z

1

Here is another solution (not really practical but working :)) using *ngFor and slice pipe:

<ng-container *ngFor="let srl of [length$ | async] | slice : (length$ | async) <= 2"> 
  (search results IF there are more than 2 goes here)
  <br>
  searchResultLength$ = {{ srl }}
</ng-container>

in order not to subscribe twice to length$, use it with piped shareReplay() operator. I also added tap with console.log to verify that we are subscribing only once although using async pipe twice:

length$ = new BehaviorSubject(3).pipe(tap(console.log), shareReplay());

STACKBLITZ: https://stackblitz.com/edit/angular-7pkcnr?file=src%2Fapp%2Fapp.component.ts

answered Apr 1, 2020 at 0:12

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

Collectives™ on Stack Overflow

Correct syntax for Angular async pipe with as keyword

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related