Descending orderByChild() on firebase and Ionic 2

Question

I need get items sorted by date, but obviously I need descending sorted to show the posts in correct order...

import {
  AngularFireDatabase
} from 'angularfire2/database';
import 'rxjs/add/operator/map';

/*
  Generated class for the FirebaseProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class FirebaseProvider {

  constructor(public afd: AngularFireDatabase) {}


  getPostsItems() {
    return this.afd.list('/Posts/', {
      query: {
        orderByChild: "date",
      }
    });

  }

This query returns a ascendent order and I need a descendent order that it's not explained in Firebase web.

Which are queries I need?

The Firebase Database always orders query results in ascending order. There is no way to invert them with an operator. Two ways to work around this limit: 1) invert the list client-side, 2) add a property with an inverted value (e.g. `-1 * timestamp`) and sort on that. See https://stackoverflow.com/questions/25611356/display-posts-in-descending-posted-order — Frank van Puffelen, Jun 29 '17 at 03:31

score 7 · Accepted Answer · edited Dec 11 '20 at 11:37

One approach could be reversing the order in your component's template. First, you get a list of posts directly in your component:

posts.component.ts

    export class PostsComponent {
      posts: FirebaseListObservable<any>;
     
      constructor(db: AngularFireDatabase) {
        this.posts = db.list('/posts', {
          query: {
            orderByChild: 'date'
          }
        });
      }
    }

Then, you can use the reverse method to reverse your posts' order in your template:

posts.component.html

    <div *ngFor="let post of (posts | async)?.slice().reverse()">
      <h1>{{ post.title }}</h1>
    </div>

What if there is a pagination! this will not work as it will reverse the first page only not the entire list — Cassini, Dec 07 '21 at 18:28

score 2 · Answer 2 · edited Nov 18 '20 at 14:05

Leaving this for Ionic 3 + AngularFire 4

posts.component.ts

    import { AngularFireDatabase } from 'angularfire2/database';
    export class PostsComponent {
          posts;
    
      constructor(db: AngularFireDatabase) {
        this.posts = db.list('/posts', ref => ref.orderByChild('date')).valueChanges();
      }
    }

posts.component.html

     <div *ngFor="let post of (posts | async)?.slice().reverse()">
      <h1>{{ post.title }}</h1>
    </div>

score 1 · Answer 3 · answered Nov 18 '21 at 17:41

You should also use limitTolast() instead of limitToFirst() to ensure that your array will start with the last value that match with your filter in your DB (by default the filter is increasing order) and then use .reverse on your array to reverse it order:

1 - let array = db.list('/posts')ref => ref.orderByChild('date').limitToLast(5);

array = array.reverse();

score 0 · Answer 4 · edited Dec 11 '20 at 11:04

Working without async in the ngFor

posts.component.ts

export class PostsComponent {
  posts: FirebaseListObservable<any>;
  constructor(db: AngularFireDatabase) {
     this.posts = db.list('/posts', {
       query: {
         orderByChild: 'date'
       }
     });
   }
}

Then, you can use the reverse method to reverse your posts' order in your template:

posts.component.html

<div *ngFor="let post of posts?.slice().reverse()">
   <h1>{{ post.title }}</h1>
</div>

Descending orderByChild() on firebase and Ionic 2

4 Answers4

Linked