I've read every question on SO about this and I still haven't found an answer to this. So don't mark this as a duplicate.

I'm using AngularFire with Angular 2 and Typescript. I'm using FirebaseListObservable to pull a list of the 24 most recent records from an endpoint. Here's my code:

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'story-list',
  templateUrl: './story-listponent.html',
  styleUrls: ['./story-listponent.scss']
})
export class StoryListComponent {
  stories: FirebaseListObservable<any[]>;

  constructor(af: AngularFire) {
    this.stories = af.database.list('/stories', {
      query: {
        limitToLast: 24
      }
    });
  }
}

This returns a list of the 24 latest stories, as expected, but when I render them on the page with:

<p *ngFor="let story of stories | async">{{ story.title }}</p>

It shows the oldest story on the top, and the newest on the bottom. I understand why this is, and I'm not claiming it's an issue, but how would I reverse this? I'd like to be able to reverse this in the query, but if that's not possible, I'd be open to somehow reversing it in the rendering.

Whatever your answer is, please don't just link to documentation. There is no documentation for AngularFire that fully explains this. I've read every word. Please provide real working code.

One solution that I absolutely will not accept, however, is storing a negative date in the records at the time of creation and then sorting based on that. That is the worst solution I've ever heard, and a real database system would allow you to do this in the query. So please don't even suggest it.

If you have any ideas, I would greatly appreciate it. I would hate to have to use another product because I love Firebase.

I've read every question on SO about this and I still haven't found an answer to this. So don't mark this as a duplicate.

I'm using AngularFire with Angular 2 and Typescript. I'm using FirebaseListObservable to pull a list of the 24 most recent records from an endpoint. Here's my code:

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'story-list',
  templateUrl: './story-list.component.html',
  styleUrls: ['./story-list.component.scss']
})
export class StoryListComponent {
  stories: FirebaseListObservable<any[]>;

  constructor(af: AngularFire) {
    this.stories = af.database.list('/stories', {
      query: {
        limitToLast: 24
      }
    });
  }
}

This returns a list of the 24 latest stories, as expected, but when I render them on the page with:

<p *ngFor="let story of stories | async">{{ story.title }}</p>

It shows the oldest story on the top, and the newest on the bottom. I understand why this is, and I'm not claiming it's an issue, but how would I reverse this? I'd like to be able to reverse this in the query, but if that's not possible, I'd be open to somehow reversing it in the rendering.

Whatever your answer is, please don't just link to documentation. There is no documentation for AngularFire that fully explains this. I've read every word. Please provide real working code.

One solution that I absolutely will not accept, however, is storing a negative date in the records at the time of creation and then sorting based on that. That is the worst solution I've ever heard, and a real database system would allow you to do this in the query. So please don't even suggest it.

If you have any ideas, I would greatly appreciate it. I would hate to have to use another product because I love Firebase.

• javascript
• angularjs
• firebase
• firebase-realtime-database
• angularfire

1 Answer 1

As far as I'm aware, the Firebase queries are always in ascending order.

However, you can reverse the ordering of the rendered list using the map operator to reverse the array that's emitted by the AngularFire2 observable:

import "rxjs/add/operator/map";

...

this.stories = af.database.list('/stories', {
  query: {
    limitToLast: 24
  }
}).map((array) => array.reverse()) as FirebaseListObservable<any[]>;

If you'd prefer to do it in the template, you could have a look at this answer.