CODEWITHSUNDEEP
angularobservableangular2-templateangular2-services
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

How to check the length of an Observable array

In my Angular 2 component I have an Observable array

list$: Observable<any[]>;

In my Template I have

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

But list$.length doesn't work with in case of Observable array.

Update:

It seems that (list$ | async)?.length gives us the length but the below code still doesn't work:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

Can anyone please guide how do I check length of Observable array.

Upvotes: 161

Views: 156728

Answers (8)

O-9
O-9

Reputation: 1769

I had this issue with Observable<Customer[]> (initialized in a constructor) saying "object is possibly undefined" when trying to hide container div when arr length is empty So I had it like this: <div *ngIf="(similarCustomers$ | async)?.length > 0">

My co-worker solved it by doing this:

<div *ngIf="(similarCustomers$ | async) as similarCustomers">
  <ng-container *ngIf="similarCustomers.length > 0">

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657238

You can use the | async pipe:

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

Update - 2021-2-17

<ul *ngIf="(list$| async) as list; else loading">
   <li *ngFor="let listItem of list">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

Update - Angular Version 6:

If you are loading up a css Skeleton you can use this. If the array has no items it will display the css template. If there is data then fill out the ngFor.

<ul *ngIf="(list$| async)?.length > 0; else loading">
   <li *ngFor="let listItem of list$| async">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

Upvotes: 278

Ahmed Al-hajri
Ahmed Al-hajri

Reputation: 67

ionic 4

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

it worked when i removed the $ sign

Upvotes: -3

Daniyal Lukmanov
Daniyal Lukmanov

Reputation: 1229

Can be shortened as well: 

<div *ngIf="!(list$ | async)?.length">No records found.</div>

Just use the exclamation mark before the parenthesis.

Upvotes: 5

Tzvi Gregory Kaidanov
Tzvi Gregory Kaidanov

Reputation: 3140

This is what worked for me - 

*ngIf="!photos || photos?.length===0"

I am getting my data from httpClient async.

All the other options here didn't work for me which was disappointing. Especially the sexy (list$ | async) pipe.

Basa..

Upvotes: 3

MD KAMRUL HASAN SHAHED
MD KAMRUL HASAN SHAHED

Reputation: 690

For Angular 4+, try this

<div *ngIf="list$ | async;let list">
    Length: {{list.length}}
    <div *ngIf="list.length>0">
        <ul>
            <li *ngFor="let item of list">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

Upvotes: 26

Andzej Maciusovic
Andzej Maciusovic

Reputation: 4476

While this answer is correct

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

Keep in mind that if you are using http client to call backend (in most cases you do) you will get duplicate calls to your API if you have more that one list$ | async. This is because each | async pipe will create new subscriber to your list$ observable.

Upvotes: 12

Blank
Blank

Reputation: 4892

A solution for .ts-Files:

     this.list.subscribe(result => {console.log(result.length)});

Upvotes: 42

Related Questions