IONIC 4 PAGINATION EXAMPLE - Develop Mobile Applications

Share the post

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 :