Never Pummel Muskoxen

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

    10.0.1 • Public • Published

    angularPaginator

    Angular Paginator

    Pagination for Angular applications

    Build Status npm version npm downloads license

    Getting Started

    edit at stackblitz | demo on stackblitz

    Installation

    Install via Package managers such as npm or yarn

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

    Usage

    Import angular-paginator module

    import { AngularPaginatorModule } from 'angular-paginator';
    
    @NgModule({
      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}}
    </div>
    
    <angular-paginator (pageChange)="currentPage = $event"></angular-paginator>

    Paginator Pipe

    angularPaginator pipe accepts

    {
      id: 'ANGULAR_PAGINATOR_DEFAULT',
      itemsPerPage: 10,
      currentPage: currentPage
    }

    Paginator Directive

    <angular-paginator
      id="ANGULAR_PAGINATOR_DEFAULT"
      [maxSize]="5"
      [rotate]="true"
      [boundaryLinkNumbers]="false"
      [forceEllipses]="false"
      (pageChange)="currentPage = $event"
      #paginator="angularPaginator"
    >
    </angular-paginator>
    • 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

    Install

    npm i angular-paginator

    DownloadsWeekly Downloads

    394

    Version

    10.0.1

    License

    MIT

    Unpacked Size

    161 kB

    Total Files

    22

    Last publish

    Collaborators

    • sibiraj-s