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"         


        

Answer 1

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