-
Notifications
You must be signed in to change notification settings - Fork 2.2k
-
Hi! I have 20 users and want to show only 5 + a 'load more' button. When the button is clicked I want to show +5 users and when all 20 users are being listed the 'load more' button needs to disappear.
I'm trying to use the Paginate a query info at this link https://firebase.google.com/docs/firestore/query-data/query-cursors
but without any success. I'm using the modular approach btw.
I think my problem is here:
const documentSnapshots = await getDocs(first); const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
Angular is warning me about the await
but I can't solve this problem.
I think this link could help: https://stackoverflow.com/questions/63921721/cloud-firestore-how-to-paginate-data-with-rxjs
Could someone explain how the getUsers()
and loadMoreData()
services are working? I could not understand.
Any help will be greatly appreciated. Thanks!
Beta Was this translation helpful? Give feedback.
All reactions
I managed to find the solution!
import { collection, collectionData, Firestore, limit, orderBy, query, startAfter } from "@angular/fire/firestore"; querySnapshot:any; lastInResponse:any; constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) { } ngOnInit(): void { this.stringEmitted.stringChanged(this.actualTitle); this.loadCustomers('customers', 'name', 5) } loadCustomers(collectionName:string, order:string, max:number) { return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe( response => { this.lastInResponse = response[response.length - 1]; ...
Replies: 1 comment
-
I managed to find the solution!
import { collection, collectionData, Firestore, limit, orderBy, query, startAfter } from "@angular/fire/firestore"; querySnapshot:any; lastInResponse:any; constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) { } ngOnInit(): void { this.stringEmitted.stringChanged(this.actualTitle); this.loadCustomers('customers', 'name', 5) } loadCustomers(collectionName:string, order:string, max:number) { return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe( response => { this.lastInResponse = response[response.length - 1]; this.querySnapshot = response; } ); } loadMore(data:any) { if(this.lastInResponse){ return collectionData(query(collection(this.firestore, 'customers'), orderBy('name'), limit(3), startAfter(data['name']))).subscribe( response => { this.lastInResponse = response[response.length - 1]; this.querySnapshot = this.querySnapshot.concat(response); // this.querySnapshot = response; } ); } return null } myTest() { console.log(this.lastInResponse); }
startAfter()
requires, in my case, the last name on my list.
Thank you all!
Beta Was this translation helpful? Give feedback.