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';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSelectModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    MatChipsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Don’t Miss : Angular 9/8 Select Dropdown

Also Read This πŸ‘‰   ng-mouseup Event 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-select-trigger>
      <mat-chip-list>
        <mat-chip *ngFor="let player of playersControl.value"
          [removable]="true" (removed)="onCatRemoved(player)" color="accent" selected>
          {{ player }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </mat-select-trigger>
  
    <mat-option *ngFor="let player of players" [value]="player">
      {{ player }}
    </mat-option>
  </mat-select>
</mat-form-field>

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;
}
  
@Component({
  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 infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.