How to check the length of an Observable array

by

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>

More Related Contents:

  1. Angular 2 cache observable http result data [duplicate]
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  4. What is the proper use of an EventEmitter?
  5. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  6. NgFor doesn’t update data with Pipe in Angular2
  7. How do I create a singleton service in Angular 2?
  8. How can I write data attributes using Angular?
  9. Angular2 multiple router-outlet in the same template
  10. OrderBy pipe issue
  11. Angular 2 Scroll to top on Route Change
  12. How can I watch for changes to localStorage in Angular2?
  13. async/await in Angular `ngOnInit`
  14. Angular2 – Interaction between components using a service
  15. How to share service between two modules – @NgModule in angular not between to components?
  16. Angular2: How is ngfor expanded
  17. vs
  18. How to use Dependency Injection (DI) correctly in Angular2?
  19. Getting Image from API in Angular 4/5+?
  20. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  21. Angular 2 – Using Shared Service
  22. Angular – Make multiple HTTP calls sequentially
  23. angular 2 http withCredentials
  24. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  25. fromPromise does not exist on type Observable
  26. How to detect scroll to bottom of html element
  27. Merging http observables using forkjoin
  28. Angular 2 – multiple instance of service created
  29. Angular 2 disable sanitize
  30. Why angular 2 ngOnChanges not responding to input array push

Leave a Comment