Ionic 5 keeps reloading same page after API subscription

Question

Im calling an API that contain pagination.

For pagination im using ngb-pagination. The request for API is the page number and the response are data to be diplayed. After calling API, when i change from page 1 to 2 its recalling twice the API. With request page = 2 and than with request page = 1. It looks like its reloading the view again and again.

Pagination initialized with page = 1;

  ionViewWillEnter()
{
  this.filterUserOntimeFunction(1)
}

function to change the page

 onPageChange = (pageNumber) => {
    this.filterUserOntimeFunction(pageNumber);
    this.pageSize = this.itemsPerPage * (pageNumber - 1);
  };

function that call API

filterUserOntimeFunction = (request) => {
    this.filterService.filterUserOntime(request).subscribe(data => {
      this.dataStore = data['response'];
      this.collectionSize = data["response"].length;
      this.pageSize = this.collectionSize / 5;     
    }, error => console.log('Could not load data.', error));
  }

code in html just display some data

<div *ngIf="dataStore; else elseBlock">
    <ion-grid>
      <ion-row class="ion-nowrap">
        <ion-col class="text-center" size="6" *ngFor="let j of dataStore">
          <ion-card class="myCard" (click)="personSelected(j)">
            <ion-img
              [src]="j.t_path_immagine"
              style="width: max-content"
              alt="100"
            ></ion-img>
            <ion-item class="myOverlay">
              <div class="subtitle"></div>
              <ion-label class="ml-2 card-title">{{j.t_nome}}</ion-label>
            </ion-item>
          </ion-card>
        </ion-col>
      </ion-row>
      <ngb-pagination
        [collectionSize]="collectionSize"
        [(page)]="currentPage"
        [pageSize]="itemsPerPage"
        (pageChange)="onPageChange($event)"
        [maxSize]="5"
        aria-label="Default pagination"
      ></ngb-pagination>
      <ion-button (click)="logScrollEnd(dataStore.length)"
        >Load more</ion-button
      >
    </ion-grid>
  </div>

  <ng-template #elseBlock> Data is loading. Please wait </ng-template>

Result its like in image below:

Answer 1

Ionic 5 and ngb-pagination is not working as expected. Instead version 4 is working good.

The code i had to change is to uninstall boostrap, ngx-pagination and remove

<ngb-pagination
        [collectionSize]="collectionSize"
        [(page)]="currentPage"
        [pageSize]="itemsPerPage"
        (pageChange)="onPageChange($event)"
        [maxSize]="5"
        aria-label="Default pagination"
      ></ngb-pagination>

Instead of that have inserted below code

 <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>