ng-pagination-component

The lightest and simplest solution for pagination in Angular.


Keywords
angular, pagination, component, angular2
License
MIT
Install
npm install ng-pagination-component@1.0.2

Documentation

Angular Pagination

Live Demo Click the link and play with pagination component.

Features

  • Specify items count per page
  • Specify current page
  • Handle every click on buttons on pagination
  • Show count of items per page.

Installation

Install ng-pagination-component

  npm install --save ng-pagination-component  

Simple Example

  //app.module.ts
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { NgPaginationComponentModule} from 'ng-pagination-component';  
  import { FormsModule } from '@angular/forms';  
    
  @NgModule({  
    declarations: [AppComponent],  
    imports: [BrowserModule, NgPaginationComponentModule, FormsModule],  
    bootstrap: [AppComponent]  
  })  
  export class AppModule {}  
//app.component.ts
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
	<ul>
            <li *ngFor="let item of items | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage }">
                {{item}}	
            </li>
	 </ul>
  
	 <lib-ng-pagination-component 
            [itemsPerPage]="itemsPerPage"  
            [currentPage]="currentPage"  
            [paginationList]="items"
            [countInfo]="true"  
            (newCurrentPage)="getNewCurrentPage($event)">
	 </lib-ng-pagination-component>
	 `
})
export class AppComponent{
    itemsPerPage: 5;
    currentPage: 1;
    items = []; 

	getNewCurrentPage(e) {  
	  this.currentPage = e;  
	}
}

API

Inputs

Input Type Default Description
paginationList Array [ ] Items array.
itemsPerPage Number 1 Allows to specify items count per page.
currentPage Number 1 Allows to specify current page.
countInfo Boolean false Allows to showing count of items per page.

Outputs

Output Description
newCurrentPage It works when clicked on any button on pagination. It returns current page number as number.