How to change the model of a mat-select in NgRx Store

Question

This is my template:

<mat-select [ngModel]="selected3">
    <mat-option (onSelectionChange)="handleChange($event,srs.id)" *ngFor="let srs of schemas" [value]="srs.id">
        {{srs.name}}
    </mat-option>
</mat-select>

In handleChange() the state of the variable selected3 is updated in NgRx store, but in my option it is not selected in mat-select drop-down. If I remove this (onSelectionChange) event, i.e. not dispatching a store action through handleChange, option selection works. I don't know what's going wrong here.

Answer 1

<mat-select (selectionChange)="handleChange($event.value)" [ngModel]="selected3">
    <mat-option  *ngFor="let srs of schemas" [value]="srs.id">
      {{srs.name}}
    </mat-option>
 </mat-select>

Use (selectionChange) event inside <mat-select> tag instead of (onSelectionChange);