I have searched extensively on SO for an answer to this question, but I haven't found a solution yet. Therefore, please do not mark this as a duplicate.
Currently, I am working with AngularFire in Angular 2 and Typescript. I am using FirebaseListObservable to retrieve the 24 most recent records from a specific endpoint. Below is the code snippet:
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
}
});
}
}
The displayed list shows the 24 latest stories, but they appear in reverse order - oldest at the top and newest at the bottom - when rendered on the page using the following code:
<p *ngFor="let story of stories | async">{{ story.title }}</p>
While I understand why this happens, I would like to reverse the order either in the query or during rendering. Please refrain from simply linking to documentation, as I have thoroughly reviewed it without finding a suitable explanation. I am looking for practical working code solutions.
One approach that I categorically reject is storing a negative date in the records and sorting based on that. This method seems impractical, and ideally, a proper database system should support reversing the order within the query itself. If you can offer any insights, I would be grateful as I prefer not to switch to another platform due to my fondness for Firebase.