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.
  1. 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.

  1. insert into Employeedetails values('Sanwar','3232323','IT','Jaipur','India')
  2. insert into Employeedetails values('Sam','676767676','IT','Delhi','India')
  3. insert into Employeedetails values('Nisha','88888','IT','Jaipur','India')
  4. insert into Employeedetails values('David','348989898934','IT','Noida','India')
  5. insert into Employeedetails values('ABC','9898989','HR','Jaipur','India')
  6. insert into Employeedetails values('XYZ','8989898989','IT','Jaipur','India')
  7. insert into Employeedetails values('QWE','565656565','HR','Jaipur','India')
  8. insert into Employeedetails values('SABS','323289898323','IT','Jaipur','India')
  9. 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
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.
Searching And Pagination Using Angular 7
Select ADO.NET Entity Data Model.
Searching And Pagination Using Angular 7
Add your connection string. You can also create a new connection and follow the wizard steps.
Searching And Pagination Using Angular 7
Select Table and click on Finish button.
Searching And Pagination Using Angular 7
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.
  1. [Route("Getemployee")]
  2. [HttpGet]
  3. public object Getemployee()
  4. {
  5. EmployeedetailsEntities DB = new EmployeedetailsEntities();
  6. try
  7. {
  8. return DB.Employeedetails;
  9. }
  10. catch(Exception)
  11. {
  12. throw;
  13. }
  14. }
Home controller Complete code:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  8. namespace EmployeeDetail.Controllers
  9. {
  10. [RoutePrefix("Api/Employee")]
  11. public class HomeController : ApiController
  12. {
  13. [Route("Getemployee")]
  14. [HttpGet]
  15. public object Getemployee()
  16. {
  17. EmployeedetailsEntities DB = new EmployeedetailsEntities();
  18. try
  19. {
  20. return DB.Employeedetails;
  21. }
  22. catch(Exception)
  23. {
  24. throw;
  25. }
  26. }
  27. }
  28. }

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
  1. using System.Web.Http.Cors;
  1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
  2. config.EnableCors(cors);
Step 9
Create an Angular project by using following command:
ng new Paging
Searching And Pagination Using Angular 7
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.
  1. export class Emp {
  2. Id:number;
  3. Name :string;
  4. MobileNo:string;
  5. Department :string;
  6. City :string;
  7. country:string;
  8. }
Step 12
Create a service to fetch data from Web API.
ng g s employee
Searching And Pagination Using Angular 7
Open employee.service.ts file and add the following line of code.
  1. import { Injectable } from '@angular/core';
  2. import { HttpClient,HttpHeaders } from "@angular/common/http";
  3. import { Observable } from "rxjs";
  4. import { Emp } from "../app/emp";
  5. @Injectable({
  6. providedIn: 'root'
  7. })
  8. export class EmployeeService {
  10. Url = 'http://localhost:60314/Api/Employee';
  11. constructor(private http:HttpClient) { }
  12. GetEmployee():Observable<Emp[]>
  13. {
  14. return this.http.get<Emp[]>(this.Url + '/Getemployee');
  15. }
  17. }
Step 13
Now, let's create a Component.
ng g c Displayemployee
Searching And Pagination Using Angular 7
Step 14
Open display-employee.component.ts and add the following code in it.
  1. import { Component, OnInit } from '@angular/core';
  2. import { EmployeeService } from '../employee.service';
  3. import { Emp} from "../emp";
  4. import { Observable } from "rxjs";
  6. @Component({
  7. selector: 'app-displya-employee',
  8. templateUrl: './displya-employee.component.html',
  9. styleUrls: ['./displya-employee.component.css']
  10. })
  11. export class DisplyaEmployeeComponent implements OnInit {
  12. private _allEmp: Observable<Emp[]>;
  13. public get allEmp(): Observable<Emp[]> {
  14. return this._allEmp;
  15. }
  16. public set allEmp(value: Observable<Emp[]>) {
  17. this._allEmp = value;
  18. }
  19. constructor(public employeeService:EmployeeService) { }
  21. loadDisplay(){
  22. debugger;
  23. this.allEmp= this.employeeService.GetEmployee();
  25. }
  26. ngOnInit() {
  27. this.loadDisplay();
  28. }
  30. }
Step 15
Now open display-employee.component.html file and add follwoing html.
  1. <div class="conatiner" style="padding-top:20px;">
  2. <div class="col-lg-12 table-responsive">
  3. <table class="table table-striped">
  4. <thead class="thead-dark">
  5. <tr>
  6. <th>Id</th>
  7. <th>Name</th>
  8. <th>Mobile No</th>
  9. <th>Department</th>
  10. <th>City</th>
  11. <th>Country</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr *ngFor="let emp of allEmp | async">
  16. <td>{{emp.Id}}</td>
  17. <td>{{emp.Name}}</td>
  18. <td>{{emp.MobileNo}}</td>
  19. <td>{{emp.Department}}</td>
  20. <td>{{emp.City}}</td>
  21. <td>{{emp.country}}</td>
  22. </tr>
  23. </tbody>
  24. </table>
  25. </div>
  26. </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.
  1. import {NgxPaginationModule} from 'ngx-pagination';
  2. import { Ng2SearchPipeModule } from 'ng2-search-filter';
Step 18
Here is the complete app.module.ts file a after change.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import {HttpClientModule, HttpClient} from '@angular/common/http';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { FormsModule } from '@angular/forms';
  7. import { DisplyaEmployeeComponent } from './displya-employee/displya-employee.component';
  8. import {NgxPaginationModule} from 'ngx-pagination';
  9. import { Ng2SearchPipeModule } from 'ng2-search-filter';
  11. @NgModule({
  12. declarations: [
  13. AppComponent,
  14. DisplyaEmployeeComponent
  15. ],
  16. imports: [
  17. BrowserModule,
  18. AppRoutingModule,FormsModule,
  19. HttpClientModule,NgxPaginationModule,Ng2SearchPipeModule
  20. ],
  21. providers: [],
  22. bootstrap: [AppComponent]
  23. })
  24. export class AppModule { }
Step 19
Open Display-employee.component.html file and add a textbox and the follwoing filer in ngFor in Tr.
  1. filter:filter| paginate: { itemsPerPage: 5, currentPage: p
Complete html of Display-employee.component.html.
  1. <div class="conatiner" style="padding-top:20px;">
  2. <div class="col-sm-5" style="padding-top:20px;padding-bottom:20px;" >
  3. <input class="form-control" type="text" placeholder="Search......." [(ngModel)]="filter">
  4. </div>
  5. </div>
  6. <table class="table table-striped">
  7. <thead class="thead-dark">
  8. <tr>
  9. <th>Name</th>
  10. <th>Mobile No</th>
  11. <th>Department</th>
  12. <th>City</th>
  13. <th>Country</th>
  14. </tr>
  15. </thead>
  16. <tbody>
  17. <tr *ngFor="let emp of allEmp | async|filter:filter| paginate: { itemsPerPage: 6, currentPage: p }">
  18. <td>{{emp.Name}}</td>
  19. <td>{{emp.MobileNo}}</td>
  20. <td>{{emp.Department}}</td>
  21. <td>{{emp.City}}</td>
  22. <td>{{emp.country}}</td>
  23. </tr>
  24. </tbody>
  25. <ul class="pagination">
  26. <pagination-controls (pageChange)="p = $event"></pagination-controls>
  27. </ul>
  28. </table>
Now build and run project and check results.
Searching And Pagination Using Angular 7
Summary
In this article, we learned how to implement paging and searching functionality using Angular.