Using AngularFirestore Collection orderBy with snapShotChanges method
21,692
Solution 1
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.
Solution 2
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 };
});
});
Author by
Nalaka526
Updated on February 13, 2020Comments
-
Nalaka526 over 4 years
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. -
Nalaka526 over 6 yearsBut I can not find a way to use
ref.orderBy
method withsnapShotChanges
method, Can you please show me a sample code... -
alex kucksdorf over 6 yearsIt should be working if you just replace the first line in your constructor with the one I posted. Check out the example app at the bottom of the page I linked, they use this approach in combination with valueChanges()
-
alex kucksdorf over 6 yearsDid you change orderBy(‘order field‘) to the correct field of your books you want to order by?
-
Nalaka526 over 6 yearsI'm so sorry... I tried this again and it works.. Previous day I've missed something... Thanks a lot :)
-
alex kucksdorf over 6 yearsGlad to help! ;)
-
gamengineers over 6 yearslife saver. This code worked for me w/ ionic, angular2fire, and firestore.
-
Laker about 6 yearsDo you know why it says to me "Property 'forEach' does not exist on type '(options?: SnapshotListenOptions) => DocumentChange[]'." please?
-
J4GD33P 51NGH over 4 yearsI'm using timestamp as orderBy and its showing latest added at last. It should show first
-
pesho hristov over 4 yearsHow is this supposed to work when you don't subscribe to the DocumentChangeAction observer?