Home

Awesome

<p align="center"> <a href="https://github.com/sibiraj-s/angular-paginator"> <img src="./assets/angular.png" alt="angularPaginator" width="350"> </a> </p> <h1 align="center">Angular Paginator</h1> <p align="center">Pagination for Angular applications</p> <p align="center"> <a href="https://github.com/sibiraj-s/angular-paginator/actions"> <img alt="Build Status" src="https://github.com/sibiraj-s/angular-paginator/workflows/Tests/badge.svg"> </a> <a href="https://www.npmjs.com/package/angular-paginator"> <img alt="npm version" src="https://badgen.net/npm/v/angular-paginator"> </a> <a href="https://www.npmjs.com/package/angular-paginator"> <img alt="npm downloads" src="https://badgen.net/npm/dt/angular-paginator"> </a> <a href="https://github.com/sibiraj-s/angular-paginator/blob/master/LICENSE"> <img alt="license" src="https://badgen.net/github/license/sibiraj-s/angular-paginator"> </a> </p>

Getting Started

edit in stackblitz

Installation

Install via package managers such as npm or yarn

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

Usage

Import the angular-paginator module

import { AngularPaginatorModule } from 'angular-paginator';

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

and in the template

<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

The angularPaginator pipe accepts

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

[!IMPORTANT] When using an id, ensure to provide the same id in both the pipe and directive of the same instance.

Paginator Directive

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

[!NOTE] maxSize 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

API

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

interface Page {
  number: number;
  text: string;
  active: boolean;
}