angular-paginator

<img src="./assets/angular.png" alt="angularPaginator" width="350">

Pagination for Angular applications

<img alt="Build Status" src="https://github.com/sibiraj-s/angular-paginator/workflows/Tests/badge.svg">

<img alt="npm version" src="https://badgen.net/npm/v/angular-paginator">

<img alt="npm downloads" src="https://badgen.net/npm/dt/angular-paginator">

<img alt="license" src="https://badgen.net/github/license/sibiraj-s/angular-paginator">

Getting Started

Installation

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

Usage

import { AngularPaginatorModule } from 'angular-paginator';

@NgModule({
  imports: [AngularPaginatorModule],
})
export class AppModule {}

<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

{
  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

• 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