Angular 10 Server Side Pagination using ngx-pagination Example

    Aug 20, 2020       by Pankaj Kumar
angular-pagination-image.jpg

In this article, We are going to implement a very common feature of any application, i. e., pagination. We will implement here server side pagination in angular 10 application. We will achieve the task using ngx-pagination package.

In the below we will mainly call data from third party server and paginate data from server side only. This article is created for the developers who have recently started working on Angular 10, So I will start from scratch.

Let's Get Started

Create new Angular app

At first, We will create a new angular10 application using angular CLI. I assume you have already installed the latest version of Angular CLI. Run below command to create a new angular app.

ng new angular10-pagination

 

After executing the above command, move to the project folder using cd /angular10-pagination and run the command npm start to run the newly created app.After running it you will see the app running over browser at url: http://localhost:4200

 

Install ngx-pagination NPM package in the application

Run below command for the package installation

npm install ngx-pagination

 

Add the installed package in  App module

Open app.module.ts file and add below code to add the package in the app module.

........

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({

declarations: [ 

...

],

imports: [

...,

NgxPaginationModule

],

providers: [],

bootstrap: [AppComponent] })

export class AppModule { }

 

Create dummy records for pagination

For simplicity, I will use here dummy data. So here we will created dummy records and se the config for the pagination.

 

 
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
config: any;
collection = [];
constructor(private route: ActivatedRoute, private router: Router) {
this.config = {
currentPage: 1,
itemsPerPage: 10,
totalItems:0
};
route.queryParams.subscribe(
params => this.config.currentPage= params['page']?params['page']:1 );
 
for (let i = 1; i <= 100; i++) {
this.collection.push(`item ${i}`);
}
 
}
 
pageChange(newPage: number) {
    this.router.navigate([''], { queryParams: { page: newPage } });
  }
}
 

 

Update Template part

Open the app.component.html page and put below code in it:

 
<div class="jumbotron">
 
<div class="text-center">
<a href="https://jsonworld.com"><h2>JSON WORLD</h2></a>
<a href="" target="_blank"><span>Server Side Pagination in Angular using ngx-pagination</span></a>
</div>
<div class="list">
<ul>
<li *ngFor="let item of collection | paginate: config">{{ item }}</li>
</ul>
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
</div>
</div>
 

 

Run the app

Here we are done with all the needed steps,  So move to the terminal and run the application using npm start. Check the app over browser at url http://localhost:4200. It will look like below:

 

Conclusion

So in this demo, We learn to do server-side pagination in angular 10 application. You can also find other demos of Angular Sample Application here to start working on enterprise level application.

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful for Server Side Pagination in  Angular application.

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

 

Find complete source code over GitHub

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