Create Simple Pagination in Angular 8

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

create an app with Angular CLI

first we need to create an angular application using below command

ng new angular8-simple-pagination

move to created folder and run the created app using ng serve. Check the running app on http://localhost:4200 on your browser.

cd angular8-simple-pagination
ng serve

Install Pagination Module

Install ngx-pagination Angular module for pagination using the below command.

npm install ngx-pagination --save

Create data to show the pagination

we will create a dataset with static data onapp.component.ts to show the pagination.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngx-pagination-in-table';
  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'}
  ];
}

Import Angular Pagination Module

We need to 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 { }

Display the data with Pagination

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

<div class="container">	
	<div class="row">
		<h2>Angular8 Pagination</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>

Run the Application

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