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!