angular-paginator

Angular Paginator

Pagination for Angular application using Bootstrap-4 template

Getting Started

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 ]
})

Import bootstrap-4 into your application

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 Component

Paginator component accepts

<angular-paginator [boundaryLinks]="false"
                   [directionLinks]="true"
                   maxSize="5"
                   [rotate]="true"
                   [boundaryLinkNumbers]="false"
                   [forceEllipses]="false"
                   size="sm"
                   id="ANGULAR_PAGINATOR_DEFAULT"
                   firstText="First"
                   previousText="Previous"
                   nextText="Next"
                   lastText="Last"
                   screenReaderFirstText="First"
                   screenReaderPreviousText="Previous"
                   screenReaderNextText="Next"
                   screenReaderLastText="Last"
                   screenReaderPageText="Page"
                   screenReaderCurrentPageText="You`re on page"
                   screenReaderPaginationLabel="Pagination"
                   className="ANGULAR_PAGINATOR_DEFAULT"
                   [autoHide]="false"
                   [disabled]="false"
                   (pageChange)="currentPage = $event">
</angular-paginator>

• id: Use unique id when multiple paginations are being used on the same page
• boundaryLinks: Whether to display First / Last buttons
• directionLinks: Whether to display Previous / Next buttons
• 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
• size: Sets the size of pagination when bootstrap 4 is being used. Can accept only two values either sm or lg. Check Bootstrap 4 docs for more details.
• className: Adds custom class to the pagination element
• firstText: Text for First button
• previousText: Text for Previous button
• nextText: Text for Next button
• lastText: Text for Last button
• autoHide: Hides the pagination component if items length is less than itemsPerPage
• disabled: Disables pagination component

Demo

Demo at stackblitz angular-paginator

Documentation

Documentation is auto-generated using compodoc, and can be viewed here: https://sibiraj-s.github.io/angular-paginator/

Changelog

v5.0.1 (2020-04-24)

Internal

• fix README, LICENSE not published to npm (b03dcef)