mat-select (Angular Material): selectionChange not firing when user selects the default value-CodePudding

(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, e.g. 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, e.g. 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.");
  }
}

CodePudding user response：

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)
}