Pagination for Angular Applications

Downloads in past


11.0.05 months ago6 years agoMinified + gzip package size for angular-paginator in KB


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

Angular Paginator

Pagination for Angular applications

<img alt="Build Status" src="">
<img alt="npm version" src="">
<img alt="npm downloads" src="">
<img alt="license" src="">

Getting Started

edit at stackblitz | demo on stackblitz


Install via Package managers such as npmnpm or yarnyarn
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