Angular Paginator

Pagination for Angular applications

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