Angular Material table paginator with undefined resultsLength

0
votes

I am using the Angular Material table with pagination.

However, I do not have finite length of results for the table.

That is due to using firestore that does not give me a count of the results.

What I can do is fetch x amount of results, and when the user presses the next page button another x amount of results are loaded.

However, in order to use that I have to pass a length to the paginator like so: 

  <mat-paginator [length]="resultsLength" [pageSize]="eventsPerPage"></mat-paginator>

The problem is that now I am limited to setting this length to some number eg 100 to get past my problem.

So in short:

  • I don't know the number of results. Imagine it like an infinite page table
  • The first request to the server lets say returns the first 10 results
  • If I assign that resultLength to the paginator then I have no options to go to the next page as the paginator thinks it reached the end?

So the last point above is my problem here

1
angularangular-materialgoogle-cloud-firestore

1 Answers

1
votes

As you dynamically load the records, have a rowcount property with results. Assign the rowcount to resultsLength to load the paginator .Use the page event in mat-paginator so that When the user changes the page, automatically this event is called and return the next set of results. Everytime you return the results change the rowcount as per the pageSize.

Refer this link https://material.angular.io/components/paginator/examples