Angular Material Multi Select Dropdown with Search Example

Hello,

I am going to show you example of angular material multi select dropdown with search. you can understand a concept of select dropdown with search in angular material multi. this example will help you select dropdown with search box in angular material multi. This tutorial will give you simple example of angular material multi select box with search. So, let's follow few step to create example of angular material multi select option with search.

We can create material multi 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 multiple 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 you have to install the material library in angular app. So, we can use angular material components:

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 multi select dropdown with search Example - ItSolutionStuff.com</h1>
        
<p>
  <mat-form-field>
    <mat-select [formControl]="websiteMultiCtrl" placeholder="Website" [multiple]="true"  #multiSelect>
      <mat-option>
        <ngx-mat-select-search [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
      </mat-option>
  
      <mat-option *ngFor="let website of filteredWebsitesMulti | async" [value]="website">
        {{website.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</p>
<ul *ngFor="let website of websiteMultiCtrl?.value">
  <li>{{website.name}}</li>
</ul>

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 implements OnInit, AfterViewInit, OnDestroy {
  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'},
    {id: '7', name: 'Google2.com'},
  ]; 
  
  public websiteMultiCtrl: FormControl = new FormControl();
  public websiteMultiFilterCtrl: FormControl = new FormControl();
  public filteredWebsitesMulti: ReplaySubject = new ReplaySubject(1);
  
  @ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
  
  protected _onDestroy = new Subject();
  constructor() { }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  ngOnInit() {
    this.websiteMultiCtrl.setValue(this.websites[1]);
    this.filteredWebsitesMulti.next(this.websites.slice());
  
    this.websiteMultiFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterWebsiteMulti();
      });
  }
  
  /**
   * 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.filteredWebsitesMulti
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
          this.multiSelect.compareWith = (a: Website, b: Website) => a && b && a.id === b.id;
      });
  }
  
  /**
   * Write code on Method
   *
   * method logical code
   */
  protected filterWebsiteMulti() {
    if (!this.websites) {
      return;
    }
  
    let search = this.websiteMultiFilterCtrl.value;
    if (!search) {
      this.filteredWebsitesMulti.next(this.websites.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
  
    this.filteredWebsitesMulti.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...