Ionic 4 pagination

I have simple provider and it gets data from API url, I need help to paginate this data and load it by IonInfiniteScroll.

Provider

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { LoadingController } from '@ionic/angular';

@Injectable({
providedIn: 'root'
})
export class CategoriesService {

apiUrl = 'https://example.com/api/categories';

constructor(private http: HttpClient, private loadingCtrl: LoadingController) { }

getDetails(url) {
const httpOptions = {
headers: new HttpHeaders({
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json'
})
};

return this.http.get(`${this.apiUrl}/${url}`, httpOptions).pipe(
map(category => category)
);
}
}


Module

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { CategoriesService } from './../../services/categories.service';
import { LoadingController } from '@ionic/angular';

@Component({
selector: 'app-categories-details',
templateUrl: './categories-details.page.html',
styleUrls: ['./categories-details.page.scss'],
})
export class CategoriesDetailsPage implements OnInit {

categories: Observable<any>;
loading: any;

constructor(
private categoriesService: CategoriesService,
public loadingController: LoadingController,
) {}

ngOnInit() {
this.getData();
}

async getData(){
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});

await this.loading.present();

this.categoriesService.getCategories().subscribe((res) => {
this.categories = res;
this.hideLoading()
});
}

private hideLoading() {
this.loading.dismiss();
}

}


Note loading: any; current loading just show loading till page loads, it returns all posts at once, it has nothing to do with posts pagination or just loading first 10 of them.

This code currently working just fine, all I need to make sort of pagination and add scroll loading.
​

View

This code returns each category posts which I need to paginate (posts)

<ion-content padding>
<ion-grid>
<ion-row>
<ion-list *ngIf="category">
<ion-item *ngFor="let post of category.posts">
<ion-avatar slot="start">
<img [routerLink]="['/', 'posts', post.url]" [src]="post.image">
</ion-avatar>
<ion-label class="ion-text-wrap" [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-content>


Any idea which part should I change and how?

Continue reading...