Simple Pagination for Angular2 application

    Jan 15, 2017       by Pankaj Kumar
simple-pagination-angular2.jpg

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. 

Angular pagination

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS