Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


GitHub license npm Build Status Codecov branch npm GitHub top language GitHub code size in bytes GitHub issues GitHub closed issues GitHub contributors

ngx-pagination-bootstrap is Bootstrap(4) based pagination module for Angular(2+) applications.



  • npm install ngx-pagination-bootstrap
  • npm install bootstrap@4.0.0 --save-dev
  • include bootstrap scripts and styles in you angular-cli.json to be build of your build process.
  • or include bootstrap css in your index.html
<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  • Right now bootstrap@4.0.0-alpha.6 is supported till v1.5.0.
  • Bootstrap v4.0.0 supported from v1.6.0 onwards.

For webpack and tsc builds/ angular-cli builds

  • import PaginationModule from ngx-pagination-bootstrap:
import { PaginationModule } from 'ngx-pagination-bootstrap'
  • add PaginationModule to the imports of your NgModule:
  imports: [

class YourModule { ... }
  • use <ng-pagination></ng-pagination> in your templates to add pagination in your view like below
<ng-pagination [position]="'left'" [pageSize]="10" [itemsCount]="data.length" [data]="data" (getPageData)="getPageData($event)"></ng-pagination>
  • do not forget to include bootstrap css in your build process, module or index.html!



  • pageSize: number - Size of a page i.e number of items to be displayed in one page.
  • itemsCount: number - total no of itmes that needs ro be paged/total no of records.
  • position: string - position of the pagination respect to parent contrainer of your pagination component.
  • data: Array - Optional | the data needs to be paged default is null. If pagination is handled by api no need of data.


  • getPageData: EventEmitter - emmited when user navigates to a page. Caputure this and update you view data. The events contains the following info
    event: event: Event,
    pageNo: pageNo: number,
    pageSize:pageSize: number,
    data: null| Array,
  • event: the triggered event
  • pageNo: current page number
  • pageSize: current page size. No of items per page
  • data: data is the array of records that belongs to this page. Will be null if data was not passed and you can fetch data from your api or the way you want it to handle


  • v1.4.1
 Added support for Observable Data Source.
 Current items range display bug when itemcount 0 bug fix .
  • v1.5.0
Angular 4.0.0 support added
Minor bug fixes
  • v1.6.0
Bootstrap 4.0.0 supported
Range of items hidden on small devices

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.