I’ve been trying to create a feature within a multiple-select menu (mat-select) in Angular 18 for a website I’ve been building, where if I pressed the ‘ALL’ option in the menu, it should select all the modules in the menu. If I deselect ‘ALL’, it should also deselect all of the modules in the menu. I’m able to succesfully get the former function (selects all modules), but I can’t seem to get the latter function (deselect all modules) working. Here is my HTML:

<mat-form-field appearance="fill">

   <mat-label>Select Modules</mat-label>

   <mat-select multiple [(ngModel)]="selectedModules (selectionChange)="onSelectionChange($event)">

      <mat-option [value]="'all'">ALL</mat-option>

      <mat-option *ngFor="let module of modules" [value]="module.value" [disabled]="isAllSelected()">{{module.viewValue}}</mat-option>

   </mat-select>

</mat-form-field>

And here is my Typescript:

export class ModuleMenuComponent {
  modules = [
    { value: 'module1', viewValue: 'Module 1'},
    { value: 'module2', viewValue: 'Module 2'}
  ];
  selectedModules: string[] = [];
  allAlreadySelected: boolean = false;
  onSelectionChange(event: MatSelectChange)
  {
    const allIndex = event.value.indexOf('all');
    if (allIndex > -1 && this.allAlreadySelected == false)
      {
        //if all is selected, select all browsers
        this.selectedModules = ['all', ...this.modules.map(b => b.value)];
        this.allAlreadySelected = !this.allAlreadySelected;
      }
    else if (allIndex > -1 && this.allAlreadySelected) {
      this.selectedModules = [];
      this.allAlreadySelected = !this.allAlreadySelected;
    }
  }

Any ideas would be greatly appreciated. Thank you.