Angular Material Select Dropdown with Search Example

Hi Dev,

In this example, you will learn angular material select dropdown with search. it's a simple example of a select dropdown with search in angular material. you'll learn select dropdown with search box in angular material. In this article, we will implement an angular material select box with search.

We can create material select dropdown with search in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17.

Here we will use ngx-mat-select-search npm package for adding select dropdown with search in angular material. so let's see a simple example step by step and you will get a demo as bellow:

You can see bellow layout for demo:

Step 1: Create New App

This step is not required; however, if you have not created the angular app, then you may go ahead and execute the below command:

ng new app-material

Step 2: Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Step 3: Install ngx-mat-select-search

Here we will install ngx-mat-select-search npm package by following command. so let's run bellow command:

npm install ngx-mat-select-search

Step 4: Import Module

first we need to import NgxMatSelectSearchModule, MatFormFieldModule and MatSelectModule. so let's update app.module.ts.

Let's follow step:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatButtonModule,
    MatFormFieldModule,
    NgxMatSelectSearchModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Update Template File

Here, you have to update html template file as bellow:

src/app/app.component.html

<h1>Angular material select dropdown with search Example - ItSolutionStuff.com</h1>
      
<p>
  <mat-form-field>
    <mat-select [formControl]="websiteCtrl" placeholder="Bank" #singleSelect>
      <mat-option>
        <ngx-mat-select-search [formControl]="websiteFilterCtrl"></ngx-mat-select-search>
      </mat-option>
  
      <mat-option *ngFor="let website of filteredWebsites | async" [value]="website">
        {{website.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</p>
<p>
  Selected Bank: {{websiteCtrl.value?.name}}
</p>

Step 6: Update Ts File

Here, you have to update ts file as bellow:

src/app/app.component.ts

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
import { ReplaySubject, Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
  
interface Website {
  id: string;
  name: string;
}
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material3';
    
  protected websites: Website[] = [
    {id: '1', name: 'ItSolutionStuff.com'},
    {id: '2', name: 'HDTuto.com'},
    {id: '3', name: 'Nicesnippets.com'},
    {id: '4', name: 'Google.com'},
    {id: '5', name: 'laravel.com'},
    {id: '6', name: 'npmjs.com'},
  ];
  
  public websiteCtrl: FormControl = new FormControl();
  public websiteFilterCtrl: FormControl = new FormControl();
  public filteredWebsites: ReplaySubject = new ReplaySubject(1);
  
  @ViewChild('singleSelect', { static: true }) singleSelect: MatSelect;
  
  protected _onDestroy = new Subject();
  constructor() { }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  ngOnInit() {
    this.websiteCtrl.setValue(this.websites[1]);
    this.filteredWebsites.next(this.websites.slice());
  
    this.websiteFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanks();
      });
  }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  ngAfterViewInit() {
    this.setInitialValue();
  }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  ngOnDestroy() {
    this._onDestroy.next();
    this._onDestroy.complete();
  }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  protected setInitialValue() {
    this.filteredWebsites
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
          this.singleSelect.compareWith = (a: Website, b: Website) => a && b && a.id === b.id;
      });
  }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  protected filterBanks() {
    if (!this.websites) {
      return;
    }
  
    let search = this.websiteFilterCtrl.value;
    if (!search) {
      this.filteredWebsites.next(this.websites.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
  
    this.filteredWebsites.next(
      this.websites.filter(bank => bank.name.toLowerCase().indexOf(search) > -1)
    );
  }
}

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

I hope it can help you...