Angular Pagination

Live Demo Click the link and play with pagination component.

Features

• [x] Specify items count per page
• [x] Specify current page
• [x] Handle every click on buttons on pagination
• [x] 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 | true | 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.