Custom bootstrap 4 pagination for any angular application

Custom Pagination in Angular

In angular project having 3rd party library i.e. ngx pagination, ng-bootsrap pagination etc. To avoid this we are built our own pagination with custom theme whatever you have. In this example we are seen here simple custom pagination for angular paging.

 

Prerequisite

1. Install Angular Cli.

2. Install Bootstrap 4 for css.

 

Setup of pagination to project

Create Angular Cli Project.

ng new angularCustomPaginationDemo

 

Create component for setup pagination html and typescript code.

ng g c pagination

 

 

Add HTML code for pagination you can use your own pagination bootstrap 4 css html code.

// src > app > pagination > pagination.component.html

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item" [class.disabled]="pageIndex === 1">
            <a class="page-link" title="Go to previous page" (click)="pageChangeBackward()"><strong>Previous</strong></a>
        </li>
        <li class="page-item" [class.active]="no === pageIndex" *ngFor="let no of totalPageNo">
            <a class="page-link" title="You are on page no {{no}}" (click)="pageChangeIndex(no)">{{no}}</a>
        </li>
        <li class="page-item" [class.disabled]="pageIndex === totalSizeOfPages">
            <a class="page-link" title="Go to next page" (click)="pageChangeForward()"><strong>Next</strong></a>
        </li>
    </ul>
</nav>

If you want to use your own pagination html code do not change the dynamic functions like class.disabled, class.active or click function and add this code to your pagination code.

 

Add Type Script Code to your pagination component.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})

export class PaginationComponent {
  @Input() pageIndex: number; // current offset
  @Input() limit: number; // record per page
  @Input() total: number; // total records
  @Input() range: number = 5;
  @Output() pageChange: EventEmitter<any>;
  totalPageNo : number [];
  totalSizeOfPages : number;

  constructor() {
    this.totalSizeOfPages = 0;
    this.totalPageNo = [];
    this.pageChange = new EventEmitter<any>()
  }

  ngOnChanges() {
    this.totalSizeOfPages = this.total / this.limit;
    this.totalSizeOfPages = Math.ceil(this.totalSizeOfPages); 

    this.totalPageNo = [];
    for(let i=1; i <= this.totalSizeOfPages; i++){
      this.totalPageNo.push(i);
    }
  }

  pageChangeBackward(){
    if(this.pageIndex > 0)
    this.pageIndex = this.pageIndex-1;
    this.pageChange.emit(this.pageIndex);
  }

  pageChangeIndex(index : number){
    this.pageIndex = index;
    this.pageChange.emit(this.pageIndex);
  }

  pageChangeForward(){
    if(this.pageIndex < this.totalSizeOfPages)
    this.pageIndex = this.pageIndex+1;
    this.pageChange.emit(this.pageIndex);
  }
}

The pagination is done. Now you can use this pagination component to anywhere in project where the pagination do you want to use.

Following is the example of list of 20 country in json array. We are use pagination for displaying only 5 records into the table to optimize the page.

 

Add HTML code into your app component html

// src > app > app.component.html

<div class="container">
  <table class="table table-bordered">
    <tr>
      <th>Country Name </th>
      <th> Country Code </th>
    </tr>
    <tr *ngFor="let item of country">
      <td> {{item.name}} </td>
      <td> {{item.code}} </td>
    </tr>
  </table>
  <div class="d-flex justify-content-center">
    <pagination [pageIndex]="pageIndex" [limit]="pageSize" [total]="count" (pageChange)="pageChanged($event)">
    </pagination>
  </div>
</div>

 

Add the typescript code to your component

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "demoForArticle";
  country: any[];
  count: number;
  pageSize: number;
  pageIndex: number;
  pageDifference : number;
  pageEndRange : number;
  pageStartRange = 1;
  countryList = [
    { id: 1, name: "Afghanistan", code: "AF" },
    { id: 2, name: "?land Islands", code: "AX" },
    { id: 3, name: "Albania", code: "AL" },
    { id: 4, name: "Algeria", code: "DZ" },
    { id: 5, name: "American Samoa", code: "AS" },
    { id: 6, name: "AndorrA", code: "AD" },
    { id: 7, name: "Angola", code: "AO" },
    { id: 8, name: "Anguilla", code: "AI" },
    { id: 9, name: "Antarctica", code: "AQ" },
    { id: 10, name: "Antigua and Barbuda", code: "AG" },
    { id: 11, name: "Argentina", code: "AR" },
    { id: 12, name: "Armenia", code: "AM" },
    { id: 13, name: "Aruba", code: "AW" },
    { id: 14, name: "Australia", code: "AU" },
    { id: 15, name: "Austria", code: "AT" },
    { id: 16, name: "Azerbaijan", code: "AZ" },
    { id: 17, name: "Bahamas", code: "BS" },
    { id: 18, name: "Bahrain", code: "BH" },
    { id: 19, name: "Bangladesh", code: "BD" },
    { id: 20, name: "Barbados", code: "BB" }
  ];

  constructor() {
    this.pageIndex = 1;
    this.pageSize = 5;
    this.pageDifference = this.pageSize - this.pageIndex;
    this.pageEndRange = this.pageIndex * this.pageSize;
    this.country = [];
  }

  ngOnInit(): void {
    this.getAll();
  }

  pageChanged(Event): any {
    this.pageIndex = Event;
    this.pageEndRange = this.pageIndex * this.pageSize;
    this.pageStartRange = this.pageEndRange - this.pageDifference;
    this.getAll();
  }

  getAll() {
    this.country = [];
    for (let x = this.pageStartRange; x <= this.pageEndRange; x++) {
      this.countryList.forEach((res : any)=>{
        if(res.id == x){
          this.country.push(res);
        }
      });
    }
    this.count = this.countryList.length;
  }
}

 

Output of the program

Above Type Script code is used to show the json data into table but in the paging format.

When we use local json to show the paging into the table we need to change the small code. Take JSON list divide it into the page size. But here is some changes to show the records paging wise.

So we are maintain this by taking difference of page distance start to end e.g.

If we select page-index is 1 (page-index is nothing but the page number) and our page-size is 5 then the difference is

page-difference = page-size - page-index

page-difference = 5 - 1

page-difference = 4

And also we need page end range and page start range

page-end-range = page-index * page-size

page-end-range = 1 * 5 = 5 this mean the json record is end with 5th location

page-end-range = 2 * 5 = 10 this mean the json record is end with 10th location

page-start-range = page-end-range - page-difference

page-start-range = 5 - 4 = 1 this means the json record is start from 1st location

page-start-range = 10 -4 = 6 this means the json record is start from 6th location

and the above is just iterate the records to fetch from start-range to end-range.

page-index = 1 so fetch data from 1 to 5 record.

page-index = 2 so fetch data from 6 to 10 record.

page-index = 3 so fetch data from 11 to 15 record.

page-index = 4 so fetch data from 16 to 20 record.

so on...

 

The custom pagination done. Thank you!!!