Angular 16 Search Filter Array of Objects Data Tutorial

Creating a search filter for an array of objects in Angular. In this tutorial, you will learn how to implement a search filter for an array of object data like id, value, key using Angular 16.

Angular 16 Search Filter Array of Objects Data Tutorial

Steps to create filter array of object data like key value in angular 16:

• Step 1 – Set Up Your Angular Application
• Step 2 – Create a Component
• Step 3 – Create a Data Source
• Step 4 – Implement the Search Filter
• Step 5 – Create the HTML Template
• Step 6 – Add FormsModule
• Step 7 – Run Your Angular Application

Step 1 – Set Up Your Angular Application

If you haven’t already, create a new Angular application using Angular CLI:

ng new angular-search-filter
cd angular-search-filter

Step 2 – Create a Component

Next, create a new component where you will implement the search filter. For this example, let’s call it product-list:

ng generate component product-list

Step 3 – Create a Data Source

For this example, let’s assume you have an array of objects representing products. You can create a file named products.ts in your project’s src/app directory to define your data:

// src/app/products.ts

export const products = [
  { id: 1, name: 'Product 1', price: 10 },
  { id: 2, name: 'Product 2', price: 15 },
  { id: 3, name: 'Product 3', price: 20 },
  // Add more products as needed
];

Step 4 – Implement the Search Filter

Now, open the product-list.component.ts file in the src/app/product-list directory and implement the search filter logic:

// src/app/product-list/product-list.component.ts

import { Component } from '@angular/core';
import { products } from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  // Initialize the product list with all products
  productList = products;

  // Create a variable to store the search term
  searchTerm: string = '';

  // Function to filter products based on the search term
  filterProducts(): void {
    if (this.searchTerm.trim() !== '') {
      this.productList = products.filter(product =>
        product.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    } else {
      // If the search term is empty, show all products
      this.productList = products;
    }
  }
}

Step 5 – Create the HTML Template

Open the product-list.component.html file and create the HTML template for your component:

<!-- src/app/product-list/product-list.component.html -->

<div>
  <h2>Product List</h2>
  <input type="text" [(ngModel)]="searchTerm" (input)="filterProducts()" placeholder="Search products">
  <ul>
    <li *ngFor="let product of productList">
      {{ product.name }} - {{ product.price | currency }}
    </li>
  </ul>
</div>

Step 6 – Add FormsModule

To enable two-way data binding and form features, you need to import and add the FormsModule to your app.module.ts file:

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule

import { AppComponent } from './app.component';
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add FormsModule to the imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7 – Run Your Angular Application

Now, you can run your Angular application:

ng serve

Your Angular app will be available at http://localhost:4200/. Open this URL in your browser to see the product list with the search filter.

Conclusion

That’s it! You’ve implemented a search filter for an array of objects in Angular 16. Users can now enter a search term, and the list of products will be filtered based on that term.

Recommended Angular Tutorials