Using AngularFirestore Collection orderBy with snapShotChanges method

31
votes

I have below code in an Angular application which is using AngularFire2.

TypeScript:

constructor(db: AngularFirestore) {
    this.booksCollectionRef = db.collection<Book>('books');

    this.books = this.booksCollectionRef.snapshotChanges().map(actions => {
        return actions.map(action => {
            const data = action.payload.doc.data() as Book;
            const id = action.payload.doc.id;
            return { id, ...data };
        });
    });
}

HTML: 

<md-list>
    <md-list-item *ngFor="let book of books | async">
        <h4 md-line>{{book.name}}</h4>
    </md-list-item>
</md-list>

This code retrieves and binds data as expected (removes items when collection updated), now I want to sort the collection by a given column. I tried to use firebase orderBy clause, but I can not figure out how to use it with snapShotChanges() method.

3
angulartypescriptfirebaseangularfire2google-cloud-firestore
Have you tried: this.books = this.booksCollectionRef.orderBy('name','desc').snapshotChanges().map(actions => - Gal Bracha
@GalBracha that also does not work. Property 'orderBy' does not exist on type 'AngularFirestoreCollection<Book>' - Nalaka526
Have you tried the default sort() function of TypeScript ? If not then please provide us with the structure of your this.books. - Ghassen Louhaichi
@GhassenLouhaichi, Not yet. That would be my last option.But I'm trying to get this done within 'snapshotChanges()' because I may need to use some other functions in firestore collection, similarly. - Nalaka526
I am not following, if you are using .map after your snapshotChanges() call, can't you simply follow that by a .sort call to sort your results ? - Ghassen Louhaichi

3 Answers

59
votes

The following should work for your use case:

this.booksCollectionRef = db.collection<Book>('books', ref => ref.orderBy('order field'));

Take a look at the documentation of AngularFirestore for further information on this topic.

11
votes
this.announcementCollectionRef = afs.collection<Announcement>('announcements', ref => ref.orderBy('createdAt', 'desc'));
this.announcements = this.announcementCollectionRef.snapshotChanges().map(actions => {
    return actions.map(a => {
        const data = a.payload.doc.data() as AnnouncementId;
        const id = a.payload.doc.id;
        return { id, ...data };
    });
});
0
votes

Not sure about Angular Fire, but you can try using the Firebase Firestore libraries directly.

The following code works for me:

someCollectionRef
.orderBy('columnName')
.onSnapshot((snapshot) => {
snapshot.docChanges.forEach(function (change) {
...doStuff