get length of items ngFor async / Observable<Aviso[]>;

Question

How can I get the total number of items using ngFor?

*ngFor="let aviso of avisosTest | async; let i = index"

I'm working with Firestore from Firebase with an Observable:

avisosTest: Observable<Aviso[]>;

I tried this but it did not work

{{ avisosTest.length }}

{{ avisosTest?.length }}

Answer 1

in Angular 4 you can do this:

*ngFor="let aviso of avisosTest | async as aviso; let i = index"

And then you can call {{ avisosTest.length }} inside that tag.

Example

<ul>
  <li *ngFor="let aviso of avisosTest | async as aviso; let i = index">
    {{aviso}} - {{i + 1}} of {{aviso.length}}
  </li>
</ul>

Working Demo - wait 2 seconds for data load

If you need it outside of the loop, you can separate async and ngFor, like:

<div *ngIf="avisosTest | async as aviso">
  <ul>
    <li *ngFor="let aviso of aviso; let i = index">
      {{aviso}}
    </li>
  </ul>
  <div>
    {{aviso.length}} items total
  </div>
</div>

Working Demo - wait 2 seconds for data load

Answer 2

I think you need

<div *ngIf="(avisosTest | async)?.length==0">No records found.</div>

or

<div *ngIf="(avisosTest | async)?.length>0">{{avisosTest.legnth}}</div>