How to set server side pagination in Angular material Table using token

Question

here i have a issue while working with angular paginator . here i am getting data like below

Response One:

{
    "Tabledata": [
      {
        "firstName":"Samuel",
        "lastName":"Smith"
      },
      {
        "firstName":"Sanu",
        "lastName":"Smith"
      }
    ],
    "paging": {
        "RecordsCount": 2,
        "token": "JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
    }
}

Response Two: I am getting total records count as 50

 { 
    'RecordsCount' : 50
  }

Now in the initial call the i am calling api and the api format is below

Initial Call

http://some api.com/data?searchParams=&pageSize=2&token=

After calling this i will get response like below

{
        "Tabledata": [
          {
            "firstName":"Samuel",
            "lastName":"Smith"
          },
          {
            "firstName":"Sanu",
            "lastName":"Smith"
          }
        ],
        "paging": {
            "RecordsCount": 2,
            "token": "JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
        }
    }

and after pressing the next button the api should initiate another http call and use this token and send it params for the same api like below

2nd call

http://some api.com/data?searchParams=&pageSize=2&token=JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

After this call i will get again same response but here token changes

{
            "Tabledata": [
              {
                "firstName":"Samuel",
                "lastName":"Smith"
              },
              {
                "firstName":"Sanu",
                "lastName":"Smith"
              }
            ],
            "paging": {
                "RecordsCount": 2,
                "token": "abcd"
            }
        }

And if i press next again in the 3rd api call is should use the 2nd response token as param for the 3rd call and it will give some token and if user presses Prev then it should use that tocken and send as param here this i am unable to solve this in front end i wrote like

 <mat-paginator [pageSize]="10" [length]="totalLength"  [pageSizeOptions]="[5, 10, 25, 100]" (page)="PageEvents($event)"></mat-paginator>


PageEvents(event: PageEvent){
    this.pageNumber = 1;
    const pageSize = +event.pageSize; 
    const currentPage = +event.pageIndex + 1; 
    const pagination = {
      searchQuery: '',
      pageSize: pageSize,
      token: ''
    };
    if(currentPage > this.pageNumber) {

     

      console.log('next button',pageSize,currentPage)
    } else {
     
      console.log('prev button',pageSize,currentPage)

    }

  }

totalLength= 50

here my issues

1. Although i am sending totallenght ui disabling my prev and next button
2. How can i achieve this pagination

Answer 1

<mat-paginator
      [length]="total"
      [pageSize]="pageSize"
      [pageSizeOptions]="pageSizeOptions"
      [showFirstLastButtons]="isShowFirstLastBtn"
      (page)="onChangePage($event)"
    ></mat-paginator>

Then in your component file, you can receive the page event as:

 private subscription = new Subscription();
   ngOnInIt() {
      // subscribe to the service for page data
      this.subscription = this.service.tableDataAction$.subscribe(resp => do initial table render);

}

    onChangePage(event: PageEvent) {
     const pageSize = +event.pageSize; // get the pageSize
     const currentPage = +event.pageIndex + 1; // get the current page
    
     this.service.paginationData(pageSize, currentPage); // call the service
    }

  ngOnDestroy() {
   this.subscription.unsubscribe()
  }

in service:
   

    private paginationSubject = new Subject<{}>();
       tableDataAction$ = this.paginationSubject.asObservable();
        paginationData(pageSize: number, currentPage: number) {
            // get or post whatever you prefer, get is more correct choice
           this.http.get(url + queryParams).subscribe(
             (resp) => this.paginationSubject.next(resp)),
             (err) => catchError // handle error
          }

P.S: To get total count of pagination you should also sent the total Count of the data present with the current data so that in pagination you can show item n of total