I’ll demonstrate how to include ngx-pagination into your Angular application using this example.
The simplest pagination method in Angular is called ngx-pagination.
Additionally, ngx-pagination provides responsiveness, customization, and flexibility.
I figured you already had Angular set up on your local system. If not, click this page for a simple Angular installation.
Just so you know, I’m new to Angular and I’m loving sharing my lessons with you.
Step 1: Create Angular Project
ngx-pagination-sample should be the name of the new project.
ng new ngx-paging-sample
Respond to the two Angular CLI queries:
Do you want to include Angular routing? No
Which format for the stylesheet should you use? CSS
Open the programme by navigating to the project folder after installation.
In my situation, I made the ngx-pagination-sample application and placed it within a folder I named Angular in drive C.
C:\Angular>cd ngx-pagination-sample C:\Angular\ngx-paging-sample>code .
Step 2: Install ngx-pagination
Run the following command in your VS Code Terminal to add ngx-pagination after opening Git Bash.
ng add ngx-pagination
OR
npm install ngx-pagination
The distinction between npm install and ng add npm install instals the most recent version of ngx-pagination, which occasionally has compatibility problems, especially if you’re running an earlier version of Angular. ng add searches for the compatible version to install for your Angular Application.
Use npm install if you’re using the most recent version of Angular.
Step 3: For tables and styling, install Bootstrap.
To style the table and pagination, we must install the Bootstrap UI package.
Put this command into action:
npm install bootstrap
Look for styles in the angular.json file and then add the following:
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
Step 4: Setting up Data Model, Service, and Temporary Data
Import HttClientModule by going to app.module.ts.
Although we’re going to utilise a json file in this example for our temporary data, this module will assist the service in retrieving data from a third-party server.
import { HttpClientModule } from ‘@angular/common/http’;
@NgModule({
declarations: […],
imports: [
HttpClientModule
],
bootstrap: […]
})
export class AppModule {}
Customers.json may be downloaded and pasted into the application assets folder.
Make a directory named “_models”
Create an interface model called customer.model.ts within the _models folder.
export interface Customer {
id: number;
firstName: string;
lastName: string;
birthday: Date;
mobileNumber: string;
email: string;
createdOn: Date;
}
Create an interface model named paging-config.model.ts inside of the _models folder.
export interface PagingConfig {
currentPage: number;
itemsPerPage: number;
totalItems: number;
}
Create an interface model named paging-config.model.ts inside of the _models folder.
ng generate service customer
OR
ng g s customer
In customer.service.ts, add the code.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Customer } from '../_models/customer.model';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
constructor(private httpClient: HttpClient) {}
getCustomers(): Observable < Customer[] > {
return this.httpClient.get < Customer[] > ("assets/customers.json");
}
}
Step 5: Setting up Angular ngx-pagination
In your AppComponent.ts file, implement PagingConfig and add initial values to the properties that will be used.
In the app.component.ts file
import { Component } from '@angular/core';
import { Customer } from './_models/customer.model';
import { PagingConfig } from './_models/paging-config.model';
import { CustomerService } from './_services/customer.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements PagingConfig {
title = 'ngx-paging-sample';
currentPage:number = 1;
itemsPerPage: number = 5;
totalItems: number = 0;
tableSize: number[] = [5, 10, 15, 20];
customers = new Array<Customer>();
pagingConfig: PagingConfig = {} as PagingConfig;
constructor(private customerService: CustomerService){
this.getCustomers();
this.pagingConfig = {
itemsPerPage: this.itemsPerPage,
currentPage: this.currentPage,
totalItems: this.totalItems
}
}
getCustomers(){
this.customerService.getCustomers()
.subscribe(res=> {
this.customers = res;
this.pagingConfig.totalItems = res.length;
});
}
onTableDataChange(event:any){
this.pagingConfig.currentPage = event;
this.getCustomers();
}
onTableSizeChange(event:any): void {
this.pagingConfig.itemsPerPage = event.target.value;
this.pagingConfig.currentPage = 1;
this.getCustomers();
}
}
- For ngx-pagination paginate settings, utilise the pagingConfig property.
- The AppComponent function Object() { [native code] } will initialise the pagingConfig property.
On your app, include the HTML code. component.html
<div class="container">
<div class="row justify-content-between">
<div class="col-4">
<h5 class="h3">NGX Pagination</h5>
</div>
<div class="col-2">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label class="control-label" for="noOfRows">No. of Rows</label>
</div>
<div class="col-auto">
<select name="noOfRows" (change)="onTableSizeChange($event)" class="form-select form-select-sm">
<option *ngFor="let size of tableSize" [ngValue]="size">
{{ size }}
</option>
</select>
</div>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>Id</th>
<th>Firt Name</th>
<th>Last Name</th>
<th>Birth Date</th>
<th>Mobile Number</th>
<th>Email</th>
<th>Registration Date</th>
</tr>
</thead>
<tr *ngFor="let customer of customers | paginate : pagingConfig; let i = index">
<td>{{ customer.id }}</td>
<td>{{ customer.firstName }}</td>
<td>{{ customer.lastName }}</td>
<td>{{ customer.birthday | date : 'MMMM dd,yyyy' }}</td>
<td>{{ customer.mobileNumber }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.createdOn | date : 'MM/dd/yyyy' }}</td>
</tr>
</table>
<div class="d-flex justify-content-center">
<pagination-controls
previousLabel="Prev"
nextLabel="Next"
(pageChange)="onTableDataChange($event)">
</pagination-controls>
</div>
</div>
Run the application,
ng serve -o
I appreciate your time and hope this was helpful.
