Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

Design custom bootstrap 4 pagination for angular project instead of using 3rd party pagination

How to design custom and own pagination in angular project for avoiding 3rd party pagination module like ngx pagination, ng-bootstrap pagination etc.
Angular   Angular 9   Pagination   ngx-pagination   javascript  

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.


We can implement pagination for 2 methods

  1. Pagination for local json data
  2. Pagination for server side web api. e.g. C# API, JAVA API etc. Click Here to see article.


Prerequisite

  1. Angular Cli. Click here to see article.
  2. Bootstrap 4 for css. click here to install bootstrap 4.


Method 1.

Pagination for local json data


Setup of pagination to project


Create Angular Cli Project. If you dont know how to install and create angular project use this article to setup angular 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 local json pagination Done!!!


To see method 2 Custom Pagination for server side web api. e.g. C# API, JAVA API etc. Click Here to see article.


If you want to use ngx-pagination click here to see the article.


If you want to use NG-Bootstrap Pagination click here to see the article.

0replies
Leave a reply
46
Registerd Users
87
Total Subscribers
59
Total Articles
38920
Total Views