Hello All, In the last Ionic 4 tutorial we have seen some basic FAQs. Today, We are going to discuss How to add pagination in Ionic 4? We will discuss the Ionic 4 Pagination example in detail. We are using the ngx-pagination package to implement the pagination feature in our application. So, let’s start to implement this.
Table of Contents
All Version using in this Ionic 4 Pagination example
ionic info
Write above code in CLI to check your version information
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 9 other plugins)
Utility:
cordova-res : not installed
native-run : 1.3.0
System:
Android SDK Tools : 26.1.1
NodeJS : v10.15.3
npm : 6.4.1
OS : Windows 10
Steps to implement Pagination Example In Ionic
Step 1 : Create a new Ionic 4 Project
ionic start IONICHELPER blank --type=angular
Step 2 : Create a new page using CLI
ionic g page pagination
Step 3 : Install dependency
npm install ngx-pagination --save
Step 4: Import the installed modules in app.module.ts
Import module
import {NgxPaginationModule} from 'ngx-pagination';
Include Module in Imports
@NgModule({
imports: [BrowserModule, NgxPaginationModule],
Full app.module.ts will look like this
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { PDFGenerator } from '@ionic-native/pdf-generator/ngx';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { OCR } from '@ionic-native/ocr/ngx';
import { CalendarModule } from "ion2-calendar";
import { NgxPaginationModule } from 'ngx-pagination';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, CalendarModule, NgxPaginationModule],
providers: [
StatusBar,
SplashScreen,
PDFGenerator,
BarcodeScanner,
OCR,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Note : I have installed unnecessary modules also. You can remove if you not using them.
Step 5: Import the installed modules in pagination.module.ts
Import module
import { NgxPaginationModule } from 'ngx-pagination';
Include Module in Imports
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PaginationPageRoutingModule,
NgxPaginationModule
],
Full pagination.module.ts will look like this
pagination.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PaginationPageRoutingModule } from './pagination-routing.module';
import { PaginationPage } from './pagination.page';
import { NgxPaginationModule } from 'ngx-pagination';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PaginationPageRoutingModule,
NgxPaginationModule
],
declarations: [PaginationPage]
})
export class PaginationPageModule {}
Step 6 : HTML
Full pagination.page.html will look like
<ion-header>
<ion-toolbar>
<ion-title>Pagination Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-list *ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: cp }" class="listMargin">
{{item.itemName}}
</ion-list>
<pagination-controls (pageChange)="cp = $event"></pagination-controls>
</div>
</ion-content>
We are displaying here a list of grocery item just to demonstrate how the pagination works! Also, <pagination-controls></pagination-controls> will handle all necessary pagination view & logic.
Step 7 : TS
Full ts file will look like this
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.page.html',
styleUrls: ['./pagination.page.scss'],
})
export class PaginationPage implements OnInit {
cp: number = 1;
data: any = [
{ itemName: 'toothpase' },
{ itemName: 'salt' },
{ itemName: 'sugar' },
{ itemName: 'oil' },
{ itemName: 'toothpase' },
{ itemName: 'salt' },
{ itemName: 'sugar' },
{ itemName: 'oil' },
{ itemName: 'toothpase' },
{ itemName: 'salt' },
{ itemName: 'sugar' },
{ itemName: 'oil' },
];
constructor() { }
ngOnInit() {
}
}
Step 8 : CSS
Full pagination.page.scss will look like this
.listMargin{
margin : 5px;
}
Step 9 : Output

Must Read :