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.

 

 

 

 

 

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.