Angular Material Multi Select Dropdown Example

Here, i will show you how to works angular material multi select dropdown example. let’s discuss about angular material multi select dropdown with checkbox. let’s discuss about multi select dropdown with checkbox angular material. you will learn angular mat-select multiple example. So, let's follow few step to create example of angular material multi select dropdown example.

In this example i will give you two simple example of how to use multi select box with reactive form in angular material theme.

We can create material multi select dropdown 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.

I will give you two simple example with angular:

1) Basic Material Multi Select Dropdown

2) Material Multi Select Dropdown with Reactive Form

You can see bellow layout for demo:

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

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

Example 1: Basic Material Select Dropdown

Here, we will create very simple example. first we need to import MatSelectModule for mat-select material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import {MatSelectModule} from '@angular/material/select';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h4>Angular Basic Multi mat-select Example</h4>
  
<mat-form-field>
  <mat-label>Select Website</mat-label>
  <mat-select multiple>
    <mat-option *ngFor="let website of websites" [value]="website.value">
      {{website.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Website {
  value: string;
  viewValue: string;
}
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material3';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];
}

Example 2: Material Select Dropdown with Reactive Form

Here, we will create very simple example using reactive form. first we need to import MatSelectModule, MatButtonModule, FormsModule and ReactiveFormsModule for mat-select material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
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';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>Angular Material Multi Select Box Example - ItSolutionStuff.com</h1>
    
<form [formGroup]="form" (ngSubmit)="submit()">
  <mat-form-field>
    <mat-label>Select Website</mat-label>
    <mat-select formControlName="website" multiple>
      <mat-option *ngFor="let website of websites" [value]="website.value">
        {{website.viewValue}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="form.get('website')?.hasError('required')">
        Please select website
    </mat-error>
  </mat-form-field>
    
  <button mat-raised-button color="accent">Submit</button>
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
  
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
interface Website {
  value: string;
  viewValue: string;
}
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material2';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];
  
  form: FormGroup = new FormGroup({});
  
  constructor(private fb: FormBuilder) {
  
    this.form = fb.group({
      website: ['', [Validators.required]],
    })
  }
   
  get f(){
    return this.form.controls;
  }
    
  submit(){
    console.log(this.form.value);
  }
}

You can easily run by the following command:

ng serve

I hope it can help you...