Skip to main content

Create Simple Pagination in Angular 8

Updated on: webdamn Angular 8, Tutorials

Pagination is an user friendly feature of web applications to show huge number of records into number of pages. The pagination is implemented in a way to fetch only records that needs to be displayed on a page to improve performance of the application.

If you’re looking for implementing pagination in Angular 8 then you’re here at right place. In our previous tutorial you have learned how to implement datatables in Angular 8. In this tutorial you will learn how to implement simple pagination in Angular 8.

Also, read:

We will cover this tutorial in easy steps to create pagination with example.

Step1: Create Simple App with Angular CLI

First we will create simple Angular 8 application angular8-simple-pagination using below command.

ng new angular8-simple-pagination

We will move to the created project folder using below command and run the created app using ng serve. We can check the created app by typing http://localhost:4200 on the browser.

cd angular8-simple-pagination
ng serve --open

Step2: Install Pagination Module

We will install ngx-pagination Angular module for pagination. We will use following command to install ngx-pagination module.

npm install ngx-pagination --save

Step3: Get Records for Pagination

Now we will get the records to display with pagination. Here in app.component.ts file, we will create collection with static data to show with pagination. 

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 in Angular 8';
   collection = [
		{'name': 'Smith','address': 'Australia','skills': 'PHP'},
		{'name':'William', 'address':'England','skills': 'Java'},
		{'name':'Andy', 'address':'Africa','skills': 'Perl'},
		{'name':'Jhon', 'address':'Africa','skills': 'JavaScript'},
		{'name':'Flower', 'address':'Brazil','skills': 'Angular'},
		{'name':'Grant', 'address':'India','skills': 'JavaScript'},
		{'name':'Root', 'address':'Sri Lanka','skills': 'PHP'},
		{'name':'Joy', 'address':'Canada','skills': 'NodeJS'},
		{'name':'Samson', 'address':'India','skills': 'JavaScript'},
		{'name':'Sanju', 'address':'India','skills': 'PHP'},
		{'name':'Rocky', 'address':'America','skills': 'PHP'},
		{'name':'Monty', 'address':'England','skills': 'Angular'},
		{'name':'Peter', 'address':'England','skills': 'JavaScript'},
		{'name':'Fleming', 'address':'Newziland','skills': 'PHP'},
		{'name':'Astle', 'address':'England','skills': 'Angular'},
		{'name':'Chris', 'address':'France','skills': 'JavaScript'},
		{'name':'Butler', 'address':'England','skills': 'PHP'}
	];  
}

Step4: Import Angular Pagination Module

We will import the ngx-pagination module in app.module.ts to implement pagination. 

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 { }

Step5: Display Records with Pagination

Now we will make changes in app.component.html file to display records with pagination using collection data.

<div class="container">	
	<div class="row">
		<h2>Example: {{ title }}</h2> 
		<table class="table table-hover table-bordered">
			<thead>
				<tr>					
					<th>Name</th>					
					<th>Address</th>	
					<th>Skills</th>	
				</tr>
			</thead>
			<tbody>
				<tr *ngFor="let item of collection | paginate:{itemsPerPage: 5, currentPage:p}">					
					<td>{{item.name}}</td>					
					<td>{{item.address}}</td>
					<td>{{item.skills}}</td>					
				</tr>			
			</tbody>
		</table>   
		<div id="pagination">
			<pagination-controls (pageChange)="p=$event"></pagination-controls>
		</div>    		
	</div>    
</div>

Step6: Run the Application

Finally run the application by typing http://localhost:4200 on the browser to load records with pagination.

This is a short tutorial to create client side pagination in Angular 8 with static data. You can use it in your project to load data from server side to implement pagination. If you have any query or suggestion, feel free to give your precious comments.

You may also like: