Angular ngx-pagination Samples: A Step-by-Step Guide

I’ll demonstrate how to include ngx-pagination into your Angular application using this example.

The simplest pagination method in Angular is called ngx-pagination.

Additionally, ngx-pagination provides responsiveness, customization, and flexibility.

I figured you already had Angular set up on your local system. If not, click this page for a simple Angular installation.

Just so you know, I’m new to Angular and I’m loving sharing my lessons with you.

Step 1: Create Angular Project

ngx-pagination-sample should be the name of the new project.

ng new ngx-paging-sample

Respond to the two Angular CLI queries:
Do you want to include Angular routing? No
Which format for the stylesheet should you use? CSS

Open the programme by navigating to the project folder after installation.

In my situation, I made the ngx-pagination-sample application and placed it within a folder I named Angular in drive C.

C:\Angular>cd ngx-pagination-sample
C:\Angular\ngx-paging-sample>code .
Step 2: Install ngx-pagination

Run the following command in your VS Code Terminal to add ngx-pagination after opening Git Bash.

ng add ngx-pagination


npm install ngx-pagination

The distinction between npm install and ng add npm install instals the most recent version of ngx-pagination, which occasionally has compatibility problems, especially if you’re running an earlier version of Angular. ng add searches for the compatible version to install for your Angular Application.

Use npm install if you’re using the most recent version of Angular.

Step 3: For tables and styling, install Bootstrap.

To style the table and pagination, we must install the Bootstrap UI package.

Put this command into action:

npm install bootstrap

Look for styles in the angular.json file and then add the following:


Step 4: Setting up Data Model, Service, and Temporary Data

Import HttClientModule by going to app.module.ts.

Although we’re going to utilise a json file in this example for our temporary data, this module will assist the service in retrieving data from a third-party server.

import { HttpClientModule } from ‘@angular/common/http’;
    declarations: […],
    imports: [
    bootstrap: […]
export class AppModule {}

Customers.json may be downloaded and pasted into the application assets folder.

Make a directory named “_models”

Create an interface model called customer.model.ts within the _models folder.

export interface Customer {
    id: number;
    firstName: string;
    lastName: string;
    birthday: Date;
    mobileNumber: string;
    email: string;
    createdOn: Date;

Create an interface model named paging-config.model.ts inside of the _models folder.

export interface PagingConfig {
    currentPage: number;
    itemsPerPage: number;
    totalItems: number;

Create an interface model named paging-config.model.ts inside of the _models folder.

ng generate service customer


ng g s customer

In customer.service.ts, add the code.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Customer } from '../_models/customer.model';
providedIn: 'root'
export class CustomerService {
    constructor(private httpClient: HttpClient) {}
    getCustomers(): Observable < Customer[] > {
        return this.httpClient.get < Customer[] > ("assets/customers.json");
Step 5: Setting up Angular ngx-pagination

In your AppComponent.ts file, implement PagingConfig and add initial values to the properties that will be used.

In the app.component.ts file

import { Component } from '@angular/core';
import { Customer } from './_models/customer.model';
import { PagingConfig } from './_models/paging-config.model';
import { CustomerService } from './_services/customer.service';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent implements PagingConfig {
  title = 'ngx-paging-sample';

  currentPage:number  = 1;
  itemsPerPage: number = 5;
  totalItems: number = 0;

  tableSize: number[] = [5, 10, 15, 20];
  customers = new Array<Customer>();

  pagingConfig: PagingConfig = {} as PagingConfig;

  constructor(private customerService: CustomerService){

    this.pagingConfig = {
      itemsPerPage: this.itemsPerPage,
      currentPage: this.currentPage,
      totalItems: this.totalItems

    .subscribe(res=> {
      this.customers = res;
      this.pagingConfig.totalItems = res.length;

    this.pagingConfig.currentPage  = event;
  onTableSizeChange(event:any): void {
    this.pagingConfig.itemsPerPage =;
    this.pagingConfig.currentPage = 1;
  • For ngx-pagination paginate settings, utilise the pagingConfig property.
  • The AppComponent function Object() { [native code] } will initialise the pagingConfig property.

On your app, include the HTML code. component.html

<div class="container">
<div class="row justify-content-between">
  <div class="col-4">
    <h5 class="h3">NGX Pagination</h5>
  <div class="col-2">
    <div class="row g-3 align-items-center">
      <div class="col-auto">
      <label class="control-label" for="noOfRows">No. of Rows</label>
    <div class="col-auto">
      <select name="noOfRows" (change)="onTableSizeChange($event)" class="form-select form-select-sm">
        <option *ngFor="let size of tableSize" [ngValue]="size">
          {{ size }}
<table class="table  table-bordered">
  <thead class="table-dark">
      <th>Firt Name</th>
      <th>Last Name</th>
      <th>Birth Date</th>
      <th>Mobile Number</th>
      <th>Registration Date</th>
  <tr *ngFor="let customer of customers | paginate : pagingConfig; let i = index">
    <td>{{ }}</td>
    <td>{{ customer.firstName }}</td>
    <td>{{ customer.lastName }}</td>
    <td>{{ customer.birthday | date : 'MMMM dd,yyyy' }}</td>
    <td>{{ customer.mobileNumber }}</td>
    <td>{{ }}</td>
    <td>{{ customer.createdOn | date : 'MM/dd/yyyy' }}</td>
<div class="d-flex justify-content-center">

Run the application,

ng serve -o

I appreciate your time and hope this was helpful.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories