Angular 8/9/10 Pagination Example and Tutorial

    Jun 10, 2019       by Pankaj Kumar
angular-8-pagination-example.jpg

Pagination is the best way to show huge number of records in series for any application. Also showing/fetching thousands of record at one go will affect the performance of the application. 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 the simple pagination in  Angular 8.

Step 1: Create a basic app with angular cli

ng new angular8-simple-pagination-example

 

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 angular8-simple-pagination-example/. You can check the newly created app by typing http://localhost:4200 on the browser.

Step 2: install ngx-pagination pagination dependency from terminal

So run the below command over terminal

npm install ngx-pagination --save

 

Step 3: Create dummy records for pagination

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 employees having employee name & code for showing pagination.

Step 4: Import dependency in app.module.ts

Now let's have a look on the code inside app.module.ts where the 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 { }
 

 

Step 5: Update view from app.component.html

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>
 

 

Now, we are done with all the needed steps for the pagination in our angular application. 

 

Step 6: Run the app

Run the app over the terminal with npm start and check the app after typing the url http://localhost:4200/. A page will open like below:

Angular 8 Pagiination

Conclusion

By following these easy steps we can easily achieve the client-side pagination in Angular 8 application. If you want to implement server-side pagination in angular8 Server Side Pagination in Angular Example and Tutorial. You can also find other demos of Angular Sample Application here to start working on enterprise-level applications. Click here to view more about the pagination package over npm.

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 it with your friends. 

Thanks!

You can download complete code from here. Download Code

Angular8 Javascript

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