onselected event in md-select in Angular 4

Question

I would like call a function in typescript on choosing a value using md-select. What is the property used for this purpose in material design ?

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>

Solution 1

For Material version >= 6

Use the (selectionChange) event on mat-select.

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

In the event method, $event.value contains the currently selected [value]. Reference to the official documentation.

@Output() selectionChange: EventEmitter< MatSelectChange >

Event emitted when the selected value has been changed by the user.

Here is a link to Stackblitz Demo.

---

For Material version < 6

Use the (change) output event.

<md-select placeholder="State" (change)="someMethod()">
  <md-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </md-option>
</md-select>

Another way is to use (onSelectionChange) event on <md-option>:

<md-select placeholder="State">
  <md-option *ngFor="let state of states" [value]="state.code" 
             (onSelectionChange)="anotherMethod($event, state)">
    {{ state.name }}
  </md-option>
</md-select>

Link to Stackblitz Demo.

Solution 2

Alternatively you can just use the (click) event on mat-option. The click event is also fired when an already selected option is selected again. (change) or (selectionChange) will not fire in such a case.

Solution 3

Just adding on for people using latest version of material and searching for the solution, change md to mat in the answer suggested by @Faisal.

<mat-select placeholder="State" (change)="someMethod()">
  <mat-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </mat-option>
</mat-select>

for material version greater than 6 use (selectionChange) instead of change

Solution 4

Try this,

html

<mat-label>Select a Category</mat-label>
<mat-select formControlName="category" name="category 
         (selectionChange)="onChangeCategory($event)">
    <mat-option *ngFor="let category of categories" [value]="category.value">
            {{category.viewValue}}
    </mat-option>
</mat-select>

Typescript

onChangeCategory(event) {
    console.log(event.value);
}

Solution 5

The documentation is very open about these sort of things:

https://material.angular.io/components/select/api

@Output()
change
Event emitted when the selected value has been changed by the user.

<md-select (change)="wasThatSoHard($event)"></md-select>

View more solutions