mat-select（Angular Material）：当用户选择默认值时，selectionChange 不会触发

Question

(may be a duplicate, but couldn't find a question with this specific issue)

Using Angular 13 with Angular-Material 13.3.9. I implemented a simple mat-select for selecting filters (all, monthly, yearly and creator). The mat-select provides a preselected value, which is monthly. Whenever the user changes the mat-selects value, an event is fired by the selectionChange EventEmitter, which works fine so far - except for one single issue:

Whenever the user selects a different value, eg yearly, and then selectes the preselected value again (monthly), the selectionChange event is not fired.

Why? And how can i get the event to fire in this specific case?

Already tested:

• Tried to use other preselected values, eg yearly. Issue is the same as with monthly, but of course now the event is not fired when the user selects yearly again.
• Hardcoding the mat-options did not change the behaviour.
• Removed translation-pipe just to be sure it doesn't interfere did not change the behaviour.

.html:

<mat-form-field appearance="fill">
  <mat-label>{{ 'filterprojects.showas' | translate }}</mat-label>
  <mat-select [(value)]="selectedMainFilter.value" (selectionChange)="onMainFilterChange()">
    <mat-option [value]="option.value" *ngFor="let option of mainFilters">{{ 'filterprojects.' + option.viewValue | translate }}</mat-option>
  </mat-select>
</mat-form-field>

.ts

@Component({
  selector: 'app-filterprojects',
  templateUrl: './filterprojects.component.html',
  styleUrls: ['./filterprojects.component.css']
})
export class FilterprojectsComponent implements OnInit {

  //Filter-Values
  mainFilters: MainFilterElement[] = [
    { value: 'all', viewValue: 'filterall' },
    { value: 'yearly', viewValue: 'filteryearly' },
    { value: 'monthly', viewValue: 'filtermonthly' },
    { value: 'creator', viewValue: 'filtercreator' }
  ];

  selectedMainFilter: MainFilterElement = this.mainFilters[2]; //Select the Monthly-Filter by default
  
  public onMainFilterChange() {
    console.log("Hi! I will not be fired, if the monthly-mainFilter is selected by the user.");
  }
}

Answer 1

Assign selectedMainFilter value inside component rather template

selectedMainFilter: string = this.mainFilters[2].value;

and use in template like

<mat-select [(value)]="selectedMainFilter" ...

now you can get selected value

onMainFilterChange() {
 console.log(this.selectedMainFilter)
}