Angular - How to best implement server-side pagination using ngx-pagination

Question

This is the first time I am trying to achieve this. I have always used Datatables. But this time around I want to use ngx-bootstrap pagination.

I have ASP.NET Core-6 Web API JSON response as shown below:

Backend 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": 0,
    "pageSize": 0,
    "numberOfPages": 0,
    "totalRecord": 0
  },
  "successful": true,
  "message": "string",
  "statusCode": 0
}

I am using Angular-14 and ngx-bootstrap pagination.

So, I converted this to Angular Typescript.

model: audit-trail-list.model.ts:

export interface IPageItem {
    id: string;
    userId: string;
    systemIpAddress: string;
    auditType: string;
    actionPerformed: string;
    actionPerformedTime: Date;
}
export interface IData {
    pageItems: IPageItem[];
    pageSize: number;
    currentPage: number;
    numberOfPages: number;
    totalRecord: number;
}
export interface IAuditTrailList {
    data: IData;
    successful: boolean;
    message: string;
    statusCode: number;
}

service:

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { IData, IPageItem, IAuditTrailList } from 'src/app/audit-trail-list.model';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReportService {
  baseUrl = environment.baseHost;
  token = localStorage.getItem('token');

  constructor(
    private http: HttpClient,
    private router: Router
  ) { }

  getAllAuditTrails(params: any): Observable<IAuditTrailList[]> {
    return this.http.get<IAuditTrailList[]>(this.baseUrl + '/admin/audit-trail', { params });
  }
}

component:

import { ReportService } from 'src/app/features/admin/services/report.service';
import { IData, IPageItem, IAuditTrailList } from 'src/app/models/report/audit-trail-list.model';

export class AuditTrailListComponent implements OnInit {
  page: number = 1;
  pageSize: number = 10;
  totalItems!: any;
  pageSizes = [10, 20, 50, 100];

  allAuditTrailList: any[] = [];
  auditList: any;

  constructor(
    private reportService: ReportService,
    private router: Router,
    private route: ActivatedRoute,
  ) {
  }
  ngOnInit(): void {
    this.loadAllAuditTrails();
  }
  getRequestParams(page: number, pageSize: number): any {
    let params: any = {};
    if (page) {
      params[`page`] = page - 1;
    }
    if (pageSize) {
      params[`size`] = pageSize;
    }
    return params;
  }

  loadAllAuditTrails() {
    const params = this.getRequestParams(this.page, this.pageSize);
     this.reportService.getAllAuditTrails(params).subscribe({
        this.allAuditTrailList = res.data.pageItems;
        this.totalItems = res.data.totalRecord;
      }
    })
  }

  handlePageChange(event: any) {
    this.page = event;
    this.loadAllAuditTrails();
  }

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

HTML:

<table class="table table-striped table-bordered table-hover">
  <tbody *ngIf="allAuditTrailList != undefined">
    <tr *ngFor="let row of allAuditTrailList
    | paginate : {
      id: 'listing_pagination',
      itemsPerPage: pageSize,
      currentPage: page,
      totalItems: totalItems
    } | let i = index;">
      <td style="width: 80px">
         {{ i + 1 }}.</td>
      <td>{{ row?.auditType || 'N/A' }}</td>
      <td>{{ row?.actionPerformed || 'N/A' }}</td>
      <td>{{ row?.systemIpAddress || 'N/A' }}</td>
    </tr>
  </tbody>
</table>
  <div class="row">
    <div class="col-md-6">
      <pagination-controls
      id="listing_pagination"
      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>

The pages loaded right and it displays the number of pages. But where I have issue is that, it's not navigating (loading) to the next page when I click next or 2,3,4 .. as the case may be.

How do I get this sorted out?

Thanks