Pagination is a 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.
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.
No comments:
Post a Comment