Change event not being invoked in material ui select component

Viewed 79

I have to run some code when country is selected in the dropdown but the method is not called at all. Here is the material code:

<mat-form-field>
  <mat-label>Select country</mat-label>
  <mat-select (change)="countrySelected(value)">
    <mat-option>None</mat-option>
    <mat-option value="option1">France</mat-option>
    <mat-option value="option2">Germany</mat-option>
    <mat-option value="option3">America</mat-option>
  </mat-select>
</mat-form-field>

Here is the method that is not being called:

countrySelected(value): void {
    console.log(value);
}

1 Answers

You should be using the event selectionChange instead. So change your code as follows:

<mat-form-field>
  <mat-label>Select country</mat-label>
  <mat-select (change)="selectionChange(value)">
    <mat-option>None</mat-option>
    <mat-option value="option1">France</mat-option>
    <mat-option value="option2">Germany</mat-option>
    <mat-option value="option3">America</mat-option>
  </mat-select>
</mat-form-field>

Checkout https://material.angular.io/components/select/api for all supported events.

Related