Searching And Pagination Using Angular 7

Pagination and searching are two useful operations in any data focused Web app. In this article, I will explain how we can implement paging, searching, and sorting in Angular 7. In this step by step tutorial, we will create an application using Visual Studio.

Prerequisites

Knowledge in angular 2 or higher
Visual studio 2017
Visual studio code
SQL Server management studio
Node and NPM installed

Technologies we used to build this demo project

ASP.NET Web API
Angular 7
SQL Server
Bootstrap

Step 1

Open SQL Server Management Studio and create a table and name it EmployeeDetails.

create table Employeedetails(Id int primary key identity,Name varchar(50),MobileNo varchar(50),Department varchar(50),City varchar(50),country varchar(50))

Insert some test data into EmployeeDetails table.

insert into Employeedetails values('Sanwar','3232323','IT','Jaipur','India')
insert into Employeedetails values('Sam','676767676','IT','Delhi','India')
insert into Employeedetails values('Nisha','88888','IT','Jaipur','India')
insert into Employeedetails values('David','348989898934','IT','Noida','India')
insert into Employeedetails values('ABC','9898989','HR','Jaipur','India')
insert into Employeedetails values('XYZ','8989898989','IT','Jaipur','India')
insert into Employeedetails values('QWE','565656565','HR','Jaipur','India')
insert into Employeedetails values('SABS','323289898323','IT','Jaipur','India')
insert into Employeedetails values('Sanwar','7676767','HR','Jaipur','India')

Step 2

Open Visual Studio and create an ASP.NET Web Application project and name it EmployeeDetail.

Searching And Pagination Using Angular 7

On the next step, Select Web API Project template.

Step 3

Right click on Model folder and add a new item and select data.

Select ADO.NET Entity Data Model.

Add your connection string. You can also create a new connection and follow the wizard steps.

Select Table and click on Finish button.

Step 4

Right click on Controller folder and add a new controller. Select Web API 2 controller and rename it as Home controller.

Step 5

Add a method to the Home controller and add following code to retrieve data.

[Route("Getemployee")]
[HttpGet]
public object Getemployee()
{
EmployeedetailsEntities DB = new EmployeedetailsEntities();
try
{
return DB.Employeedetails;
}
catch(Exception)
{
throw;
}
}

Home controller Complete code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace EmployeeDetail.Controllers
{
[RoutePrefix("Api/Employee")]
public class HomeController : ApiController
{
[Route("Getemployee")]
[HttpGet]
public object Getemployee()
{
EmployeedetailsEntities DB = new EmployeedetailsEntities();
try
{
return DB.Employeedetails;
}
catch(Exception)
{
throw;
}
}
}
}

Step 6

Now enable cors. Go to tools, open nuget package manager, search cors and install Microsoft.Aasp.net.webapi.cors.

Open Webapiconfig.cs and add the following lines and add required namespace

using System.Web.Http.Cors;

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Step 9

Create an Angular project by using following command:

ng new Paging

Step 10

Open this project in Visual studio Code and install bootstrap by using following command:

npm install --save bootstrap

Step 11

Create a class with the name 'Emp'

ng g class Emp

Now open emp.ts class and add the following properties in it.

export class Emp {
Id:number;
Name :string;
MobileNo:string;
Department :string;
City :string;
country:string;
}

Step 12

Create a service to fetch data from Web API.

ng g s employee

Open employee.service.ts file and add the following line of code.

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { Emp } from "../app/emp";
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
Url = 'http://localhost:60314/Api/Employee';
constructor(private http:HttpClient) { }
GetEmployee():Observable<Emp[]>
{
return this.http.get<Emp[]>(this.Url + '/Getemployee');
}
}

Step 13

Now, let's create a Component.

ng g c Displayemployee

Step 14

Open display-employee.component.ts and add the following code in it.

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { Emp} from "../emp";
import { Observable } from "rxjs";
@Component({
selector: 'app-displya-employee',
templateUrl: './displya-employee.component.html',
styleUrls: ['./displya-employee.component.css']
})
export class DisplyaEmployeeComponent implements OnInit {
private _allEmp: Observable<Emp[]>;
public get allEmp(): Observable<Emp[]> {
return this._allEmp;
}
public set allEmp(value: Observable<Emp[]>) {
this._allEmp = value;
}
constructor(public employeeService:EmployeeService) { }
loadDisplay(){
debugger;
this.allEmp= this.employeeService.GetEmployee();
}
ngOnInit() {
this.loadDisplay();
}
}

Step 15

Now open display-employee.component.html file and add follwoing html.

<div class="conatiner" style="padding-top:20px;">
<div class="col-lg-12 table-responsive">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Mobile No</th>
<th>Department</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let emp of allEmp | async">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.MobileNo}}</td>
<td>{{emp.Department}}</td>
<td>{{emp.City}}</td>
<td>{{emp.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>

Open style.css file and add:

@import '~bootstrap/dist/css/bootstrap.min.css';

Step 16

Let's add Paging in the Page. Open terminal and add the following npm command:

npm install --save ngx-pagination

Step 17

Add following command for implement searching:

npm i ng2-search-filter --save

Export and import both these directive in app.module.ts file.

import {NgxPaginationModule} from 'ngx-pagination';
import { Ng2SearchPipeModule } from 'ng2-search-filter';

Step 18

Here is the complete app.module.ts file a after change.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { DisplyaEmployeeComponent } from './displya-employee/displya-employee.component';
import {NgxPaginationModule} from 'ngx-pagination';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
@NgModule({
declarations: [
AppComponent,
DisplyaEmployeeComponent
],
imports: [
BrowserModule,
AppRoutingModule,FormsModule,
HttpClientModule,NgxPaginationModule,Ng2SearchPipeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 19

Open Display-employee.component.html file and add a textbox and the follwoing filer in ngFor in Tr.

filter:filter| paginate: { itemsPerPage: 5, currentPage: p

Complete html of Display-employee.component.html.

<div class="conatiner" style="padding-top:20px;">
<div class="col-sm-5" style="padding-top:20px;padding-bottom:20px;" >
<input class="form-control" type="text" placeholder="Search......." [(ngModel)]="filter">
</div>
</div>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Mobile No</th>
<th>Department</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let emp of allEmp | async|filter:filter| paginate: { itemsPerPage: 6, currentPage: p }">
<td>{{emp.Name}}</td>
<td>{{emp.MobileNo}}</td>
<td>{{emp.Department}}</td>
<td>{{emp.City}}</td>
<td>{{emp.country}}</td>
</tr>
</tbody>
<ul class="pagination">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</ul>
</table>

Now build and run project and check results.

Summary

In this article, we learned how to implement paging and searching functionality using Angular.

9 Comments

Join the conversation! Your thoughts help the community grow.

Hamid Khan6y ago
Very good explanation.....................
akram khan6y ago
Can you provide sorting on columns? plz suggest
Harshitha R6y ago
How and where to include "filter:filter| paginate: { itemsPerPage: 5, currentPage: p " please be more specific, I tried different ways but didnt get and I am new to angular..
akram khan6y ago
[(ngModel)]="filter" is not working. and grid paging working fine.
Damodaran N7y ago
Hi Nice article. I tried it above step but while execute the project i got below error.ERROR in ./src/app/app.module.tsModule not found: Error: Can't resolve 'ng2-search-filter' in 'D:\test\New folder\Angular7\Angular7CRUD\Angularcrud\src\app'
- Damodaran N7y ago
  Thanks so you much , already am installed ng2-search-filter --save and Imported it in app.module import { Ng2SearchPipeModule } from 'ng2-search-filter'; import {NgxPaginationModule} from 'ngx-pagination'; imports: [ BrowserModule, FormsModule, Ng2SearchPipeModule, NgxPaginationModule ] and check with package.json file their available "ng2-search-filter": "^0.4.9", "ngx-pagination": "^3.2.1" but while i execute the project i got below error ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve 'ng2-search-filter' in 'D:\test\New folder\Angular7\Angular7CR UD\Angularcrud\src\app'
- Sanwar Ranwa7y ago
  Add npm i ng2-search-filter --save this command and addd reference in app.mdoule.ts file check references
Arvind Singh7y ago
Nice article.. keep going...
Cris Gomez7y ago
Great tutorial, easy to follow. Thx!!