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> 

Answer 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.