How can I add pagination on my ionic app? - ionic-framework

Question

I am building a mobile app from my WordPress website I am getting the content from my WordPress website but I don't know how to load more data to the page
Here is my html code:
<ion-list>
<ion-item *ngFor="let item of getData">{{item}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
Here is my ts file:
import { Component } from '#angular/core';
import { NavController, NavParams, Item } from 'ionic- angular';
import { Api, Items } from '../../providers';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-latest',
templateUrl: 'latest.html',
})
export class LatestPage {
currentItems: Item[];
item: any;
getData: Object;
constructor(public navCtrl: NavController, toastCtrl: ToastController,
public api:Api, navParams: NavParams, items: Items,public
http:HttpClient)
{
this.api.getPosts().subscribe(data=>{
console.log(data)
this.getData = data
})
}
doInfinite(infiniteScroll: any) {
this.api.getPosts().subscribe(data=>{
console.log(data)
this.getData = data
})
infiniteScroll.complete()
}
openItem(item){
this.navCtrl.push('ItemDetailPage', {
itemName: item
});
}
}
I need the data to be displayed when we scroll down.

Answer 1

Pagination doesn't really work on a mobile app. The popular replacement for that, is to use an inifnite scroll.
It works by adding a HTML element on your display. You first fetch a batch of records to display ( let's say 50 ) & when the user reaches to the end of these records, infinite scroll gets triggered, you fetch the next 50 records from the server & display.
The fetching of data is done by adding the parameters limit & offset to your api call.
data; //data to display
getData(limit, offset) {
this.http.get(API_URL"+&limit="+limit+"&offset="+offset,{}).subscribe((response) =>{
this.data.push(response);
}
}
doInfinite(infiniteScroll) {
//Calculate your limit & offset values
this.getData(this.limit, this.offset);
infiniteScroll.complete();
}
This tutorial might be helpful for your particular case.