Angular 15 App User Search – Part 4: Implementing Search Functionality and App Logic

In the previous parts of this tutorial series, we have set up the basic structure of our User Search Angular 15 App, created the user service to fetch user data, and implemented the user list display component. In this part, we will be focusing on implementing the search functionality and adding the application logic to handle user search.

Before we proceed with implementing the search functionality, let’s first define what our search functionality should do:

1. Allow users to enter text in an input field to search for specific users.
2. Display search results in real-time as the user types in the search input.
3. Clear the search results when the search input is empty.
4. Include logic to handle edge cases such as an empty user list or no search results found.

To implement the search functionality, we will first create a search input field in the user list component and bind it to a search term variable using ngModel. We will then create a custom pipe to filter the user list based on the search term entered by the user.

Step 1: Add Search Input Field
In the user-list.component.html file, add an input field for users to enter their search term:

<input type="text" [(ngModel)]="searchTerm" placeholder="Search for users...">

Step 2: Create Search Pipe
Next, create a new file called search.pipe.ts and add the following code to create a custom pipe that filters the user list based on the search term:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], searchTerm: string): any[] {
    if (!items) {
      return [];
    }
    if (!searchTerm) {
      return items;
    }

    searchTerm = searchTerm.toLowerCase();

    return items.filter(item => {
      return item.name.toLowerCase().includes(searchTerm) || 
             item.email.toLowerCase().includes(searchTerm);
    });
  }
}

Step 3: Implement Search Logic in User List Component
In the user-list.component.ts file, import the SearchPipe and inject it into the component’s constructor. Create a new variable called filteredUsers to store the filtered user list based on the search term entered by the user. Update the user list display logic to use the filteredUsers array instead of the original userList array.

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from '../user.interface';
import { SearchPipe } from '../search.pipe';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  userList: User[];
  filteredUsers: User[] = [];
  searchTerm: string = '';

  constructor(private userService: UserService, private searchPipe: SearchPipe) { }

  ngOnInit(): void {
    this.userService.getUsers()
      .subscribe(users => {
        this.userList = users;
        this.filteredUsers = users;
      });
  }
}

Step 4: Update User List Display
In the user-list.component.html file, update the user list display logic to use the filteredUsers array instead of the userList array. Also, add the search pipe to filter the user list based on the search term entered by the user.

<div *ngFor="let user of filteredUsers | search: searchTerm">
  <div>{{ user.name }}</div>
  <div>{{ user.email }}</div>
</div>

With these steps completed, you should now have a fully functioning User Search Angular 15 App with search functionality implemented. Users can now enter text in the search input field to search for specific users, and the application will display real-time search results based on the search term entered. Make sure to test your application thoroughly to ensure that the search functionality works as expected and handles all edge cases appropriately.