Simple Pagination for Angular2 application

Cronjob

Pagination is the phenomenon by which you can navigate through the links that connect with numerous pages within a series. For example, when you search something that returns a large number of records which cannot be shown on a single web page therefore, those records are part into number of pages that can be accessed through links via pagination structure.

So today in this demo we will discuss about the simple pagination in  angular2 and for its above versions.

Step 1: Create a basic app with angular cli

ng new angular-pagination

By typing the above command we will see a basic angular app created on the current folder. So move to the created folder by typing cd angular-pagination/. You can check the newly created app by typing http://localhost:4200 on the browser.

Step 2: install ngx-pagination from terminal

So run the above command over terminal

npm install ngx-pagination --save

 

Now we will create static data to show the pagination. So lets have a look on the code under file app.component.ts 

 
import { Component } from '@angular/core';
import {NgxPaginationModule} from 'ngx-pagination';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'simple pagination demo';
collection = [];
constructor(){
for(let i=1;i<=100;i++){
let Obj = {'name': `Employee Name ${i}`,'code': `EMP00 ${i}`}
this.collection.push(Obj);
}
}
}
 

 

In the above file we can see that inside constructor we have created a loop for created dummy record for 100  employee having employee name & code for showing pagination.

Now lets have a look on the code inside app.module.ts where ngx-pagination module has been imported

 

 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { NgxPaginationModule } from 'ngx-pagination';
import { AppComponent } from './app.component';
 
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxPaginationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
 

 

Now one last step needed to do is, add the below code anywhere inside app.component.html

 

 
<ul>
<li> Emp Name | Emp code</li>
<li *ngFor="let item of collection | paginate:{itemsPerPage: 5, currentPage:p}">{{item.name}} | {{item.code}}</li>
</ul>
<pagination-controls (pageChange)="p=$event"></pagination-controls>
 

 

By following these easy steps we can easily achieve the  client side pagination in angular2. You can also download the complete zipped code from this site.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends. 

You can download complete code from here. Download Code