Angular Material Select With Search -

How to Use Angular Material Select With Search ?

To get started, you need to install Angular material to your Angular app. Once you have Angular material installed, you need to import MatSelectModule and use Material Select in your app.

Here is your app.component.html:

<mat-select placeholder="Select price" [(ngModel)]="selectedValue" name="item">
  <mat-option *ngFor="let item of items" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

Import MatInput Module

Now let’s add a search input to the HTML code. Start by importing the MatInputModule.

import { MatInputModule } from  '@angular/material/input';

Also add the MatInputModule to imports array.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';

import { FormsModule } from '@angular/forms';
import { SearchPipe } from './search.pipe';


@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatSelectModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the search input to the app.component.html.

<mat-select placeholder="Select price" [(ngModel)]="selectedValue" name="item">
  <input matInput placeholder="search">
  <mat-option *ngFor="let item of items" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

Create a filter pipe called search using the cli.

ng g pipe search

It should create a file called search.pipe.ts. Here is how it looks:

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

Let’s modify the transform method code to pass the items to be searched and the search text to the search filter pipe.

transform(items: any[], searchTxt: string): any[] {
    return null;
  }

Search Filter Logic : If items is null or empty, or if searchTxt is null or empty, let’s return the items list. If items is good and we have a searchTxt let’s find the matching data from the items array and return.

Here is how the search.pipe.ts looks:

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(items: any[], searchTxt: string): any[] {
    if(!items || !items.length) return items;
    if(!searchTxt || !searchTxt.length) return items;
    return items.filter(item => {
      return item.viewValue.toString().toLowerCase().indexOf(searchTxt.toLowerCase()) > -1
    });
  }

}

Modify the app.component.html to include the search filter pipe.

<mat-select placeholder="Select price" [(ngModel)]="selectedValue" name="item">
  <input [(ngModel)]="searchTxt" matInput placeholder="search">
  <mat-option *ngFor="let item of items | search : searchTxt" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

Here is the app.component.ts file for your reference:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selectedValue: any;
  searchTxt: any;

  items = [{
    value : 100,
    viewValue : 100
  },{
    value : 200,
    viewValue : 200
  },{
    value : 300,
    viewValue : 300
  }];

}

Summary

Use MatInputModule to add a input search to Angular Material Select HTML.
Create an Angular pipe for searching through the Material Select Data.

Import MatInput Module

Creating Angular Search Filter

Summary