How To Add Dynamic Pagination To Angular Or NodeJS Using NPM Packages

Introduction - Pagination

The Action of Paging: the condition of being paged.

The numbers or marks are used to indicate the sequence of pages (as of a book). And also the number and arrangement of pages or an indication of these.

Prerequisites

Basic knowledge of Angular 8
Code editor like Visual Studio code

Install npm package to use the functionality of dynamic pagination,

$npm i ap-pagination

Angular

Step 1

Import {get Pager} from ‘ap-Pagination’;

Step 2

Initialize variables like below,

Pager:any ={};
Length = 10;
DefaultEntrie =5;

Where you can set length and default entries dynamically at run time according to your use.

Step 3

Function call for the pagination,

setPage(1) {
    this.pager = getPager(this.length, page, this.defaultEntrie);
}

where page is initialized by 1.

Step 4

Add HTML code to display the pagination according to your data.

put this link in your index.html page,

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>

<ul *ngIf="pager.pages && pager.pages.length" class="pagination justify-content-center">
  <li [ngClass]="{'disabled':pager.currentPage === 1}">
    <a class="page-link" (click)="setPage(1)">First</a>
  </li>
  <li [ngClass]="{disabled: pager.currentPage === 1 }">
    <a class="page-link" (click)="setPage(pager.currentPage - 1)">Previous</a>
  </li>
  <li *ngFor="let page of pager.pages" [ngClass]="{'active': pager.currentPage === page}">
    <a class="page-link" (click)="setPage(page)">{{page}}</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
    <a class="page-link" (click)="setPage(pager.currentPage + 1)">Next</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
    <a class="page-link" (click)="setPage(pager.totalPages)">Last</a>
  </li>
</ul>

Step 5

Write below css code in .css file,

.pagination {
    display: inline - block;
    padding - left: 0;
    margin: 20 px 0;
    border - radius: 4 px;
}.pagination > li {
    display: inline;
}.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6 px 12 px;
    margin - left: -1 px;
    line - height: 1.42857143;
    color: #337ab7;
  text-decoration: none;
  background-color: # fff;
    border: 1 px solid #ddd;
}.pagination > li: first - child > a, .pagination > li: first - child > span {
    margin - left: 0;
    border - top - left - radius: 4 px;
    border - bottom - left - radius: 4 px;
}.pagination > li: last - child > a, .pagination > li: last - child > span {
    border - top - right - radius: 4 px;
    border - bottom - right - radius: 4 px;
}.pagination > li > a: hover, .pagination > li > span: hover, .pagination > li > a: focus, .pagination > li > span: focus {
    z - index: 2;
    color: #23527c;
  background-color: # eee;
    border - color: #ddd;
}.pagination > .active > a, .pagination > .active > span, .pagination > .active > a: hover, .pagination > .active > span: hover, .pagination > .active > a: focus, .pagination > .active > span: focus {
    z - index: 3;
    color: #fff;
    cursor: default;
    background - color: #1ABB9C;
  border-color: # 1 ABB9C;
}.pagination > .disabled > span, .pagination > .disabled > span: hover, .pagination > .disabled > span: focus, .pagination > .disabled > a, .pagination > .disabled > a: hover, .pagination > .disabled > a: focus {
    color: #777;
  cursor: not-allowed;
  background-color: # fff;
    border - color: #ddd;
}.pagination - lg > li > a, .pagination - lg > li > span {
    padding: 10 px 16 px;
    font - size: 18 px;
    line - height: 1.3333333;
}.pagination - lg > li: first - child > a, .pagination - lg > li: first - child > span {
    border - top - left - radius: 6 px;
    border - bottom - left - radius: 6 px;
}.pagination - lg > li: last - child > a, .pagination - lg > li: last - child > span {
    border - top - right - radius: 6 px;
    border - bottom - right - radius: 6 px;
}.pagination - sm > li > a, .pagination - sm > li > span {
    padding: 5 px 10 px;
    font - size: 12 px;
    line - height: 1.5;
}.pagination - sm > li: first - child > a, .pagination - sm > li: first - child > span {
    border - top - left - radius: 3 px;
    border - bottom - left - radius: 3 px;
}.pagination - sm > li: last - child > a, .pagination - sm > li: last - child > span {
    border - top - right - radius: 3 px;
    border - bottom - right - radius: 3 px;
}.pager {
    padding - left: 0;
    margin: 20 px 0;
    text - align: center;
    list - style: none;
}.pager li {
    display: inline;
}.pager li > a, .pager li > span {
    display: inline - block;
    padding: 5 px 14 px;
    background - color: #fff;
    border: 1 px solid #ddd;
    border - radius: 15 px;
}.pager li > a: hover, .pager li > a: focus {
    text - decoration: none;
    background - color: #eee;
}.pager.next > a, .pager.next > span {
    float: right;
}.pager.previous > a, .pager.previous > span {
    float: left;
}.pager.disabled > a, .pager.disabled > a: hover, .pager.disabled > a: focus, .pager.disabled > span {
    color: #777;
  cursor: not-allowed;
  background-color: # fff;
}

The output looks like this if everything is perfectly done…!!