0

I have one array with the label 'All' like below. Created the mat-option based on the array.

  1. If I select 'All' means its needs to be selected for all other options.
  2. If I deselect the 'All' option means deselecting all options from the dropdown.

component.html:

<mat-form-field>
  <mat-select [ngModel]="selectedCities" placeholder="Favorite City" multiple>
    <mat-option *ngFor="let city of allCities" [value]="city.value">
      {{city.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

component.ts:

selectedCity: any;

  allCities = [
    { label: 'All' },
    { value: 'Mumbai-1', label: 'Mumbai' },
    { value: 'Delhi-2', label: 'Delhi' },
    { value: 'Chennai-2', label: 'Chennai' },
    { value: 'Kolkatta-3', label: 'Kolkatta' },
  ];
VelPaari
  • 11
  • 2
  • Does this answer your question? [Select All mat option and deselect All](https://stackoverflow.com/questions/51580095/select-all-mat-option-and-deselect-all) – Yong Shun Jan 10 '23 at 07:10

1 Answers1

0

Just check this Demo Might Help as you need to check and uncheck the checkbox at once

https://stackblitz.com/edit/select-all-option-angular-material?file=src%2Fapp%2Fapp.component.ts

Akshay Phadke
  • 81
  • 5
  • Thanks Akshay. But my case is not using the form control only use ngModel. The label 'All' is coming from the backend so that not required the additional module/component to select/deselect all. – VelPaari Jan 08 '23 at 15:35