mat-button-toggle catering for multi-select-CodePudding

I currently have a mat-button-toggle-group active as follows: The button is populated with an array of 1,2,3,All,None. Multi-select has been enabled so more than one of the following options can be selected. How can I make it that if 1,2 or 3 is selected and then 'None' is selected that the previous numbered options are cleared so that only None is selected. Likewise if All is selected.

<mat-button-toggle-group #group="matButtonToggleGroup" style="margin-left: -100%; margin-right:20px" appearance="legacy" name="fontStyle" aria-label="Font Style"  [value]="selectedTime" (change)="onValChange(group.value)"  multiple>
 <mat-button-toggle style="color: black" disabled>Time</mat-button-toggle>
 <mat-button-toggle *ngFor="let time of getTime()" style="outline: none !important;" [value]="time.timeno" (click)="changeTimeSelection(time.timeno, time.begin, time.end)">{{time.timeno}}</mat-button-toggle>
</mat-button-toggle-group>

CodePudding user response：

You can push or pop required values inside changeTimeSelection method something like

changeTimeSelection(timeNo) {
    if (timeNo != 'All') {
      let isAllSelected = this.buttonValues
        .filter((v) => v.timeNo != 'All' && v.timeNo != 'None')
        .every((v) => this.selectedState.includes(v.timeNo));
      if (isAllSelected && !this.selectedState.includes('All')) {
        this.selectedState.push('All');
      } else {
        this.selectedState = this.selectedState.filter((s) => s != 'All');
      }
    }
    if (timeNo != 'None' && this.selectedState.length > 1) {
      this.selectedState = this.selectedState.filter((s) => s != 'None');
    }
    if (timeNo == 'All' && this.selectedState.includes('All')) {
      this.selectedState = this.buttonValues
        .filter((v) => v.timeNo != 'None')
        .map((v) => v.timeNo);
    }
    if (timeNo == 'None' && this.selectedState.includes('None')) {
      this.selectedState = ['None'];
    }
  }

Here is working demo