ItSolutionStuff.com

Angular Material Multi Select Dropdown with Search Example

By Hardik Savani • May 2, 2024
Angular

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...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Material Multi Select Dropdown Example

Read Now →

Angular 12 RxJS Observable with Httpclient Tutorial

Read Now →

Angular 12 CRUD Application Tutorial Example

Read Now →

Angular 12 Httpclient Service Request Example

Read Now →

Angular 12 Material Datepicker Example

Read Now →

Angular Material Dynamic Checkbox List Example

Read Now →

Angular Material Input Currency Mask Example

Read Now →

Angular Material Input Mask Date Example

Read Now →

Angular Material Phone Number Input Mask Example

Read Now →

Angular 11 Install Material Design Tutorial

Read Now →

Angular 11/10 Material Badge Example Tutorial

Read Now →

Angular 11/10 Material Card Example

Read Now →

Angular Material Textarea Tutorial

Read Now →