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

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

Angular Material Multi Select with Chips Example

Select Player: {{ player }} cancel {{ 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.

Leave a Comment