Create Search Functionality using 2 steps using pipe in Angular

To Implement Search Functionality without writing code in ts file

Step1: Create a Pipe using below code.

Code Of Search Filter Pipe

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchByFilter' }) export class SearchByFilterPipe implements PipeTransform { transform(items: any[], searchText: string, fieldName: string): any[] { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); return items.filter(item => item[fieldName]?.toLowerCase().includes(searchText)); } }

Step2: write below code where you want to implement search like in drop down.

Code Snippet

<div> <mat-label class="font-semibold">Select Company*</mat-label> <mat-form-field class="w-1/3"> <mat-select formControlName="companyId" (selectionChange)="onOrganizationChange($event.value)" placeholder="Select Company"> <mat-form-field > <input matInput placeholder="Search Company" #searchInput /> </mat-form-field> <mat-option *ngFor="let org of organizationsData | searchByFilter:searchInput.value:'organizationName'" [value]="org.organizationId"> {{ org.organizationName }} </mat-option> </mat-select> </mat-form-field> </div>

In above code we use just

<input matInput  placeholder="Search Company" #searchInput /><br> 
based on referece variable we took input and pass to pipe | searchByFilter:searchInput.value:'organizationName'"