Ionic 5 keeps reloading same page after API subscription

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;Please describe the question in detail and share your code, configuration, and other relevant info.

  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

Screenshot from 2021-08-02 06-20-45

This strikes me as more of a Bootstrap question than an Ionic question, and, for the record, I think mashing up multiple frameworks in a single app is best avoided.

There is a lot of instability going on here, mostly due to modification of external state from inside reactive code. I think your biggest problem is that you’re eating your own tail in filterUserOntimeFunction.

From the pagination component’s POV, how things are supposed to go:

1a. how big is my entire collection?
1b. how many pages am I splitting it into?
2. cool, guess I’ll start on page 1
3. switch back and forth amongst pages to heart’s content

How things look to me like they’re actually going:

1a. how big is my entire collection?
1b. how many pages am I splitting it into?
2. cool, guess I’ll start on page 1
3. wait, what was that? the stuff I meticulously calculated in step 1 got changed when I switched pages? oh well, GOTO 1a

It was a problem of ngb-pagination with ionic 5. On my last ionic 4 with ngb-pagination was working perfectly. No idea why actually.

Anyway solved by changing to

<pagination-controls (pageChange)=“onPageChange($event)”>