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