ANGULAR 20.3.18 - SEARCH AND PAGINATION - CUSTOM FILTER USING PIPE

 

ANGULAR 20.3.18
Employee Search with Pagination 

---

🔷 1. Overview

This feature allows users to:

✔ Search employees by Name, Designation, or Contact
✔ View results with Pagination
✔ Perform search without calling API again (client-side filtering)

---

🔷 2. Technologies Used

• Angular 20 (Standalone Components)
• Template Driven Forms (ngModel)
• Custom Pipe (filterEmployees)
• ngx-pagination

---

🔷 3. Service Layer (Data Fetching)

📌 What?

Fetch employee data from API and store in service.

📌 Why?

• Centralized data storage
• Avoid multiple API calls

📌 Code

getAllEmployees(): void {
  this.httpClient.get<any>(environment.apiUrl + 'Employees')
    .subscribe({
      next: response => {
        this.employees = response.$values;
      }
    });
}

---

🔷 4. Component Layer (UI Control)

📌 What?

• Calls service
• Holds search input
• Displays data

📌 Code

searchTerm: string = '';
p: number = 1;
itemsPerPage: number = 5;

ngOnInit(): void {
  this.employeesService.getAllEmployees();
}

---

🔷 5. Custom Pipe (Filtering Logic)

📌 What?

Filters employee list based on search text.

📌 Why?

• Reusable logic
• Keeps component clean
• Works automatically in template

---

📌 Code

import { Pipe, PipeTransform } from '@angular/core';
import { Employee } from '../models/employee';

@Pipe({
  name: 'filterEmployees',
  standalone: true
})
export class FilterEmployeesPipe implements PipeTransform {

  transform(employees: Employee[], searchTerm: string): Employee[] {

    if (!employees || !searchTerm) return employees;

    searchTerm = searchTerm.toLowerCase();

    return employees.filter(emp =>
      emp.EmployeeName.toLowerCase().includes(searchTerm) ||
      emp.Designation.toLowerCase().includes(searchTerm) ||
      (emp.Contact ?? '').includes(searchTerm)
    );
  }
}

---

🔷 6. HTML (View Layer)

📌 Search Box

<input type="text"
       class="form-control mb-3"
       placeholder="Search employee..."
       [(ngModel)]="searchTerm"
       (ngModelChange)="p = 1">

---

📌 Display Data (Filter + Pagination)

<tr *ngFor="let emp of employeesService.employees
            | filterEmployees: searchTerm
            | paginate: { itemsPerPage: itemsPerPage, currentPage: p }">

---

📌 Pagination Controls

<pagination-controls (pageChange)="p = $event"></pagination-controls>

---

🔷 7. How It Works (Flow)

🔄 Step-by-Step Flow

1. Component Loads
        ↓
2. ngOnInit() calls getAllEmployees()
        ↓
3. API returns employee list
        ↓
4. Data stored in:
   employeesService.employees
        ↓
5. User types in search box
        ↓
6. searchTerm updates (ngModel)
        ↓
7. Pipe executes automatically:
   filterEmployees(employees, searchTerm)
        ↓
8. Filtered data passed to pagination
        ↓
9. Paginated results shown in UI

---

🔷 8. Important Concepts

---

✅ Why Pipe is Used?

Without Pipe	With Pipe
Logic in component	Clean separation
Manual filtering	Automatic
Less reusable	Reusable

---

✅ Why No API Call for Search?

• Data already loaded
• Faster performance
• Reduces server load

---

✅ Why Order Matters?

employees | filterEmployees | paginate

✔ First filter
✔ Then paginate

❌ Wrong:

employees | paginate | filterEmployees

---

🔷 9. Advantages

✔ Fast (client-side filtering)
✔ Clean architecture
✔ Reusable pipe
✔ Works with pagination
✔ Angular 20 compatible

---

🔷 10. Best Practice 

• Use client-side filtering for small data
• Use API filtering for large data