Example of Angular 8/9 Pagination Using ngx-pagination

This tutorial help to implement Angular 4 pagination into HTML table using ngx-pagination.I will demonstrate how to implement HTML listing with pagination using Angular 2 and angular 4. I will use HTTP rest call to get data from the server in JSON format and display in HTML.

I have shared Getting started with Angular 4 tutorial. I am extending that angular tutorial and creating a new one for pagination. We will add an HTML table listing and pagination.

I am not using server-side pagination So all data will come once at the time of the load page. You can convert the pagination server-side using send extra parameters like current page and number of records in a page.

I will use ngx pagination module to create pagination using angular 2/4. You can install ngx-pagination using npm command ‘npm install ngx-pagination –save’. It’s internally using the foundation css framework but you can override pagination CSS with bootstrap with extra effort.

I will use the following files in this angular pagination tutorial:

• package.json : This file will use to install require dependency module.
• angular-cli.json : I will include all js and css file into this file.
• app.component.html : This file is directive template that contains the html for displaying listing and pagination.
• app.component.ts : This file help to controls models and view.
• app.module.ts : This file use to inject require modules for this componenets.
• app.service.ts : This is a service file which will have all methods to communicate server side rest api.You can inject this service anywhere into your application and use HTTP service.

Angular 4 Pagination Using ngx-pagination

We can create a sample app using the angular command line, I will also add the dependency bootstrap like if you want to use bootstrap CSS into angular 4, jquery etc. We will use PHP rest API to get all employee data from the server in JSON format and store into a variable.

I am assuming you have angular 4 or angular 2 sample project, I have 'simple-angular4-pagination' folder if not please create using Angular 4 from scratch tutorial. Now open package.json file and add below dependencies.

"bootstrap": "^v4.0.0-alpha.6",
"jquery": "^3.2.1",
"ngx-pagination": "^3.0.1",

You can skip the last line if you have already installed ngx pagination module.I have included bootstrap 4 module, if you don’t need then skipped the above jquery and bootstrap module entry.

Now run the below command on the root of your angular 4 project:

d:/simple-angular4-pagination > npm install

Added below bootstrap css and js path reference into angular-cli.json file,

"styles": [
 "../node_modules/bootstrap/dist/css/bootstrap.min.css",
 "../node_modules/datatables.net-dt/css/jquery.dataTables.css",
 "styles.css"
  ]
  "scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/datatables.net/js/jquery.dataTables.js"
  ]

We will create app.service.ts file and add the below code into this file, I am defining the main rest api hosturl and using GET call to get all employee data from php rest api server.

import { Injectable } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Http, Response, RequestOptions, Headers} from '@angular/http';

import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';
import { CommonModule } from '@angular/common'; 
@Injectable()
export class EmployeeService {
//the URL of the REST API
private servUrl = "http://localhost/api/v1/employees";
constructor(private http: Http) { }
//method to get all employee
getEmployees(): Observable<response> {
    return this.http.get(this.servUrl);
}
}
</response>

You need to replace 'http://localhost/api/v1/employees' url with your API hosturl.

Open app.module.ts file and below code, I will inject EmployeeService so that we can access getEmployee() method into controller file.

We have created Angular HTTP service to get employee data from the server and injected it into app modules, Now open app.component.ts file which will have logic to handle HTML and model. You need to add below code into this file:

import { Component } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Headers, Response} from '@angular/http';
import {EmployeeService} from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  employees: Array<any>;
  totalRec : number;
  page: number = 1;

  //Constructor injected with the Service Dependency
    constructor(private serv: EmployeeService) {
        this.employees = new Array<any>();
    }
    //4. Load all Employees
    ngOnInit() {
		console.log('gggg');
        this.loadEmployee();
    }
 
    private loadEmployee() {
        this
            .serv
            .getEmployees()
            .subscribe((resp: Response) =&gt; {
                this.employees = resp.json();
                this.totalRec = this.employees.length;
                console.log(this.totalRec);
                console.log(this.page);
				
                //console.log(JSON.stringify(resp.json()));    
            });
    }
}
</any></any>

You can see the above code, I have created loadEmployee() method to access the service method to get data and assign to employee array type variable. I am using loadEmployee() method on initializing an app so that data will available at the time of app bootstrap.

We will edit app.html.ts file to add some HTML code for view, created html table and iterate on employee json data. We will bind single employee data with a row and display. Added below code into app.component.ts file.

<div class="container">
<h1>HTML table listing and pagination Using Bootstrap and Angular 4</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>Id</td>
<td>EmpNo</td>
<td>EmpName</td>
<td>Salary</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{emp.id}}</td>
<td>{{emp.employee_name}}</td>
<td>{{emp.employee_salary}}</td>
<td>{{emp.employee_age}}</td>
</tr>
</tbody>
</table>
<div>&nbsp;</div>
</div>

'pagination-controls' is the ngx-pagination module directive, which is responsible to show pagination as per passed parameters.

Conclusions:

I have created an HTML table listing and demonstrated how to communicate view, service and controller class in angular4/2.We have created a separate service class to communicate to the server rest API. You can use bootstrap pagination nav bar as well but need to create you own custom pagination service class.