rg-pagination-lib v1.0.2

Pagination (Angular)

Simple-2-use custom made pagination component for angular.

Installation

Install rg-pagination-lib with npm:

$ npm install --save rg-pagination-lib

Usage

<rg-pagination
  [currentPage]="currentPage"
  [count]="count"
  [itemsPerPageList]="itemsPerPageList"
  [selectedItemPerPage]="selectedItemPerPage"
  (goPrev)="goToPrev()"
  (goNext)="goToNext()"
  (goToItemPerPage)="goToItemPerPage($event)"
></rg-pagination>

Steps to Follow

• Add below link in index.html file.

 <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

• Import rg-pagination-lib module in app.module.ts file.

import { RgPaginationLibModule } from 'rg-pagination-lib';

imports: [
  ...,
    RgPaginationLibModule
  ],

• In app.component.html , add the following

<rg-pagination
  [currentPage]="currentPage"
  [count]="count"
  [itemsPerPageList]="itemsPerPageList"
  [selectedItemPerPage]="selectedItemPerPage"
  (goPrev)="goToPrev()"
  (goNext)="goToNext()"
  (goToItemPerPage)="goToItemPerPage($event)"
></rg-pagination>

• In app.component.ts , add the following

export class AppComponent {
  public currentPage = 1; 
  public count = 100; 
  public selectedItemPerPage; //default value is 10
  public itemsPerPageList = [10, 20, 50, 100, 500]; //default value
  title = 'app-component';
  goToItemPerPage(event) {
    this.selectedItemPerPage = event;
  }
  goToPrev() {
      console.log('IN Previous');
  }
  goToNext() {
      console.log('IN Next');

  }
}

• Final Result looks like

Total Items: {{ count }} Items per page: {{ selectedItemsPerPage }} Showing 1 - {{ pagesToShow }} of {{ currentPage }}

Params

Happy Coding ! :stuck_out_tongue_closed_eyes: