Newts Parading Majestically

    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published


    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.


    npm i ngx-pagination-bootstrap

    DownloadsWeekly Downloads






    Unpacked Size

    128 kB

    Total Files


    Last publish


    • manishjanky