CODEWITHSUNDEEP
angular
obl
obl

Reputation: 1799

Length of observable array using 'as' syntax

"@angular/core": "^6.1.4"

Here is my .html:

  <div *ngIf="errors$ | async as errors">
    <div class="container alert alert-danger" *ngIf="errors.length > 0">
      <b>{{errors.length}} error(s)</b>
      <ul *ngFor="let error of errors">
        <li>{{error}}</li>
      </ul>
    </div>
  </div>

My question is: can I reduce it down to a single *ngIf?

I have tried the following:

(errors$ | async as errors).length > 0
(errors$ | async as errors) && errors.length > 0

Both of these gave a template parse error.

I have already looked at How to check the length of an Observable array, this question is different because I want to use as syntax.

All I want to do is subscribe to the observable with the as syntax and only show this div if the length of the array is greater than 0. Any help would be appreciated!

Upvotes: 1

Views: 2314

Answers (1)

Derviş Kayımbaşıoğlu
Derviş Kayımbaşıoğlu

Reputation: 30565

how about this

*ngIf="(errors$ | async)?.length > 1 && (errors$ | async)?.length < 5"

or 

*ngIf="(errors$ | async)?.length > 0 && (errors$ | async) as errors">

Update

there is an issue for this on github. please see the link. Obviously this behaviour is not yet supported.

Upvotes: 3

Related Questions