angular 2/4/5 Material: How to get unchecked value of multi select drop down

1
votes

HI all i am using angular material for multi select drop down, i am able to get the
selected values , can any one help to get unchecked value for multi select drop down

1
angulartypescriptangular5
Instead of asking for direct solution, you should show what you tried and what didn't worked - Nitishkumar Singh
Filter out remaining ones as unchecked. - Amit Chigadani
Show what you have tried before. - Karnan Muthukumar

1 Answers

0
votes

You can check following ways,

in component.html

<mat-form-field>
    <mat-select placeholder="Toppings" (selectionChange)="onChange($event.value)" multiple>
        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
    </mat-select>
</mat-form-field>

and in component.ts

toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
selectedList: any = []; // store selected options here

onChange(event) {

   let missing = null;

   for (let i = 0; i < this.selectedList.length; i++) {
      if (event.indexOf(this.selectedList[i]) == -1) missing = this.selectedList[i];      // Current[i] isn't in prev
   }

    if (missing)
      alert(missing);

    this.selectedList = event;

  }

here is Stackblitz demo