Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

New modular: Paginate a query + Load button #3213

Answered by 7elmon
7elmon asked this question in Q&A
Discussion options

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!

You must be logged in to vote

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

Comment options

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!

You must be logged in to vote
0 replies
Answer selected by 7elmon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /