Never Pummel Muskoxen

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

    10.0.1 • Public • Published


    Angular Paginator

    Pagination for Angular applications

    Build Status npm version npm downloads license

    Getting Started

    edit at stackblitz | demo on stackblitz


    Install via Package managers such as npm or yarn

    npm install angular-paginator --save
    # or
    yarn add angular-paginator


    Import angular-paginator module

    import { AngularPaginatorModule } from 'angular-paginator';
      imports: [AngularPaginatorModule],
    export class AppModule {}

    Then in HTML

    <div *ngFor="let item of array | angularPaginator: { currentPage: currentPage }; let i = index">
      {{(currentPage - 1) * itemsPerPage + i +1}}. {{item}}
    <angular-paginator (pageChange)="currentPage = $event"></angular-paginator>

    Paginator Pipe

    angularPaginator pipe accepts

      itemsPerPage: 10,
      currentPage: currentPage

    Paginator Directive

      (pageChange)="currentPage = $event"
    • id: Use unique id when multiple paginations are being used on the same page
    • maxSize: Limit number for pagination size
    • rotate: Whether to keep the current page in the middle of the visible ones
    • boundaryLinkNumbers: Whether to always display the first and last page numbers. If max-size is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: max-size refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential
    • forceEllipses: Also displays ellipses when rotate is true and maxSize is smaller than the number of pages

    You can get access to the pagination instance(directive's api) using #paginator="angularPaginator". The following are the methods/properties available via the API

    • pages - Array of page objects.
    interface Page {
      number: number;
      text: string;
      active: boolean;
    • toPreviousPage() - Sets the current page to previous (currentPage - 1)
    • toNextPage() - Sets the current page to next (currentPage + 1)
    • toFirstPage() - Sets the first page as current
    • toLastPage() - Sets the last page as current
    • setCurrentPage(val) - Sets the given page as current page.
    • currentPage - Returns the current page number
    • firstPage - Returns the first page number
    • lastPage - Returns the last page number


    npm i angular-paginator

    DownloadsWeekly Downloads






    Unpacked Size

    161 kB

    Total Files


    Last publish


    • sibiraj-s