i have a problem with my angular pagination , specialy the page size

Question

i'm trying to make a pagination with mat-paginator but when i click & change the page size nothing happen , the pageSize(limit) still the same as the server-side limit nothing changed

referee-listing.ts:

 export class RefereeListingComponent implements OnInit , AfterViewInit{

  displayedColumns: string[] = ['fullName', 'dateOfBirth', 'placeOfResident', 'email', 'phoneNumber', 'refereeType', 'action'];
  cellColors = ['#e28743', '#b8b5ff', '#7eca9c', '#f5c0c0', '#897853'];

  referees: Referee[] = [];


  length = 40;
  page = 1;
  size = 10;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild('input') input: ElementRef;

  constructor(private refereeService: RefereeService,
              private httpClient: HttpClient,
              private router: Router,
              private route: ActivatedRoute,
              private snackBar: MatSnackBar) {
  }

  ngOnInit(): void {
    this.populateReferees();
  }

  ngAfterViewInit(): void {
  }

  getRequestParams(page: number , pageSize: number): any {
    let params: any = {};

    if(page) {
      params[`page`] = page - 1;
    }

    if(pageSize) {
      params[`size`] = pageSize ;
    }

    return params;

  }

  btnHandler() {
    this.router.navigateByUrl('frmhb/referees/new')

  }

  populateReferees() {
    const params = this.getRequestParams(this.page , this.size)
    this.refereeService.getReferees(params).subscribe((data: any) => {
        const { referees, totalReferees , limit} = data;
        this.referees = referees;
        this.length = totalReferees;
        this.size = limit;
        console.log(data);
      },
      error => {
        this.errorHandler('error', 'حدث خطأ ما أثناء إحضار قائمة الحكام')
      });


  }
            
             onPaginate(pageEvent: PageEvent) {
                  this.size = +pageEvent.pageSize;
                  this.page = +pageEvent.pageIndex + 1;
                  this.refereeService.getReferees(this.params);
                }

refereeService.ts :

getReferees(params: any): Observable<Referee[]> {
return this.httpClient.get<Referee[]>(`${BASE_URL}/referees`,{params}); }

serverSide pagination : I'm using mongoose-paginate-v2 for the pagination in server-side in node js

 exports.findAll = (req, res) => {
        // const fullName = req.query.fullName;
        const { page , size , fullName} = req.body
        const condition = fullName ? { fullName: { $regex: new RegExp(fullName), $options: "i" } } : {};
    
    
        const { limit , offset } = getPagination(page , size);
    
        Referee.paginate(condition , { limit , offset})
            .then(data => {
                res.send({
                    totalReferees: data.totalDocs,
                    referees: data.docs,
                    limit: data.limit,
                    totalPages: data.totalPages,
                    currentPage: data.page - 1,
                });
            })
            .catch(err => {
                res.status(500).send({
                    message:
                        err.message || "Some error occurred while retrieving Referees."
                });
            });
    };

referee-listing.html :

<mat-paginator pageIndex = "1" [length]="length"
               [pageSize]="size"
               [pageSizeOptions]="[5, 10, 25, 100]"
               (page)="onPaginate($event)"></mat-paginator>

any ideas? thanks in advance

Answer 1

Incrementing the pageSize and page index with new value could be your problem if pagination is not working correctly. Please try assigning page size and page index directly.

this.size = pageEvent.pageSize;
this.page = pageEvent.pageIndex + 1;

Answer 2

The problem lies in your onPaginate method. You are updating your page index and calling getReferees() method. But you are not subscribing to its result. Therefore, your page isn't updating.

Replace the call to getReferees() with this.populateReferees()

 onPaginate(pageEvent: PageEvent) {
                  this.size = +pageEvent.pageSize;
                  this.page = +pageEvent.pageIndex + 1;
                  //this.refereeService.getReferees(this.params);//This call was not subscribed, hence bindings and data were not getting updated.
                  this.populateReferees(); //This will call the API and populate the result with new response.
                }