New modular: Paginate a query + Load button

[7elmon]

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!

[7elmon]

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!