Using mat-select, I need to reset the selection for a specific value of mat-select's mat-option.
For instance, take a look at this example on StackBlitz
In the example, the mat-select has three options; when selecting Canada, it should revert back to the previously selected value.
onCountryChange($event) {
const oldIndex = this.countries.indexOf(this.selectedCountry);
if ($event.value.short === 'CA') {
this.selectedCountry = this.countries[oldIndex];
} else {
this.selectedCountry = $event.value;
}
}
The JSON data outside the mat-select is updating correctly. However, the mat-select itself is not reflecting the change in the selected option.
I have attempted various methods such as using FormControl, setTimeout, and attaching only the short property of the object instead of the whole object with mat-option. Yet, I couldn't get it to work as intended. You can refer to this other example on StackBlitz for more information.