Angular Material Dropdown

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.

Contents

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

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;
}
  
@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.

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