angular material dropdown – Angular Material Multi Select Dropdown with Chips Example

angular material dropdown – first of all install the angular material using the above-mentioned command. Angular Bootstrap dropdown is a toggleable menu embedding additional links or content.

angular material dropdown

Select with multiple selection. An angular Material Form control is an essential component, especially when working with the data.

Step 1: Create New App

ng new app-material

Step 2: Add Material Design

ng add @angular/material

Step 3: Import Module : 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';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Don’t Miss : Angular 9/8 Select Dropdown

Read Also:  Double Click (ng-dblclick) using Angular Example

Step 4: Update Template File : src/app/app.component.html

<h4>Angular Material Multi Select with Chips Example</h4>
<mat-form-field >
  <mat-label>Select Player:</mat-label>
  <mat-select [formControl]="playersControl" multiple>
        <mat-chip *ngFor="let player of playersControl.value"
          [removable]="true" (removed)="onCatRemoved(player)" color="accent" selected>
          {{ player }}
          <mat-icon matChipRemove>cancel</mat-icon>
    <mat-option *ngFor="let player of players" [value]="player">
      {{ player }}

Step 5: Update Ts File : src/app/app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
interface Player {
  value: string;
  viewValue: string;
  selector: 'pakainfo-blog',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent{
  title = 'app-material3';
  playersControl = new FormControl([]);
  players: string[] = ['Virat','Sachin', 'Rohit', 'Yuvraj', 'Iyer'];
  onCatRemoved(cat: string) {
    const players = this.playersControl.value as string[];
    this.removeFirst(players, cat);
    this.playersControl.setValue(players); // To trigger change detection
  private removeFirst(array: T[], toRemove: T): void {

    const index = array.indexOf(toRemove);
    if (index !== -1) {
      array.splice(index, 1);

I hope you get an idea about angular material dropdown.
I would like to have feedback on my
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.