PageSizeOnChange not working in ngx-pagination

Question

In Angular-14, I am implementing ngx-pagination with server side pagination in ASP.NET Core-6 Web API. I have this code:

JSON Response:

{
  "data": {
    "pageItems": [
      {
        "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
        "userId": "string",
        "systemIpAddress": "string",
        "auditType": "string",
        "actionPerformed": "string",
        "actionPerformedTime": "2022-10-28T05:54:12.830Z"
      }
    ],
    "currentPage": 1,
    "pageSize": 10,
    "numberOfPages": 3,
    "totalRecord": 33
  },
  "successful": true,
  "message": "string",
  "statusCode": 0
}

service:

getAllAuditsPagination(pageNumber?: number,pageSize?: number): Observable<IAuditList[]> {
  return this.http.get<IAuditList[]>(this.baseUrl + '/users/all-audits?pagenumber='+ pageNumber+'&pageSize='+pageSize);
}

component.ts:

  allAuditList: any[] = [];
  dataBk: IPageItem[] = this.allAuditList;
  pageSize: number = 10;
  currentPage: number = 1;
  numberOfPages!: number;
  totalRecords: number = 0;
  pageSizes = [10, 20, 50, 100];

  handlePageChange(event: number): void {
    this.currentPage = event;
    this.loadAllAudits();
  }

  handlePageSizeChange(event: any): void {
    this.pageSize = event.target.value;
    this.currentPage = 1;
    this.loadAllAudits();
  }

  loadAllAudits() {
    this.auditService.getAllAuditsPagination(this.currentPage, this.pageSize).subscribe({
      next: (res: any) => {
        this.allAuditList = res.data.pageItems;
        this.totalRecords = res.data.totalRecord;
        this.currentPage = res.data.currentPage;
        this.pageSize = res.data.pageSize;
        this.dataBk = res.data.pageItems;
        this.isLoading = false;
      }
    })
  }

component.html:

  <tr
    *ngFor="
      let row of allAuditList
        | paginate
          : {
              itemsPerPage: pageSize,
              currentPage: currentPage,
              totalItems: totalRecords
            }
        | orderBy : order : reverse : caseInsensitive;
      let i = index
    "
  >

  <div class="row">
    <div class="col-md-6">
      <pagination-controls
      previousLabel="Prev"
      nextLabel="Next"
      [responsive]="true"
      (pageChange)="handlePageChange($event)"
    >
    </pagination-controls>
    </div>
    <div class="col-md-4">
      Items Per Page:
      <select (change)="handlePageSizeChange($event)">
        <option *ngFor="let size of pageSizes" [ngValue]="size">
          {{ size }}
        </option>
      </select>
    </div>
  </div>

Pagination is working fine. But where I have issue is the handlePageSizeChange, I mean dropdown paging

Then dropdown has 10,20,50,100. For example when I selected 20 from the from the dropdown OnChange, the pagesize and the pagination (1,2...6) remain the same.

I got this in the console:

Request URL: https://myapp/api/v1/users/all-audits?pageNumber=1&pageSize=%C2%A0%C2%A0%C2%A0%C2%A0%C2%A020 

StatusCode: 400

Error ["The value '     20' is not valid for PageSize."]

Why is there leading space before 20 in ["The value '     20' is not valid for PageSize."]

How do I correct this?

Answer 1

Always use value='size' to bind instead on [ngValue]='size'

Try below code this might work

<select (change)="handlePageSizeChange($event)">
        <option *ngFor="let size of pageSizes" value="size">
          {{ size }}
        </option>