How to Add a Search Feature in Angular Application

In this guide, you’ll learn how to implement a search functionality in your Angular app. The search will allow users to filter data, such as housing locations, based on criteria like city names. Follow these simple steps to set up the search feature.

Step 1: Update HomeComponent Properties

First, you need to store the filtered results in a new property within your HomeComponent.

1. Open src/app/home/home.component.ts.
2. Add a new array property filteredLocationList in the HomeComponent class:

filteredLocationList: HousingLocation[] = [];

This property will hold the results that match the user’s search input.

3. Set the default value of filteredLocationList to show all available housing locations when the page loads:

constructor() {
  this.housingLocationList = this.housingService.getAllHousingLocations();
  this.filteredLocationList = this.housingLocationList;
}

Now, filteredLocationList will display all housing locations by default until a search query is made.

Step 2: Update the HomeComponent Template

Next, you’ll modify the template to capture user input and trigger the search functionality.

1. Find the existing input field in your HomeComponent template and add a template variable called #filter:

<input type="text" placeholder="Filter by city" #filter>

This variable will store the user’s input.

2. Attach a click event handler to the “Search” button that calls the filterResults function:

<button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>

When the button is clicked, the value of the input field (captured by filter.value) is passed to the filterResults function.

3. Update the ngFor directive to iterate over the filteredLocationList:

<app-housing-location *ngFor="let housingLocation of filteredLocationList" [housingLocation]="housingLocation"></app-housing-location>

This ensures that only the filtered results are displayed after a search.

Step 3: Implement the Search Function

Finally, implement the filterResults function in your HomeComponent class to handle the filtering logic.

1. Add the following function to your class:

filterResults(text: string) {
  if (!text) {
    this.filteredLocationList = this.housingLocationList;
    return;
  }

  this.filteredLocationList = this.housingLocationList.filter(
    housingLocation => housingLocation?.city.toLowerCase().includes(text.toLowerCase())
  );
}

Here’s what’s happening:

• If the search input is empty, the filteredLocationList reverts to showing all housing locations.
• If a search query is entered, the list is filtered based on the city name, checking for matches regardless of capitalization.

After implementing the code, save your changes and refresh the browser. You should now be able to filter housing locations by city by entering text into the search field and clicking the “Search” button.

By following these simple steps, you’ve successfully added a search feature to your Angular app. You can further customize this functionality by allowing users to filter results based on additional fields, or by applying more advanced search criteria.

Keep Learning 🙂