Posted inAngularJS

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

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype