onselected event in md-select in Angular 4
AngularAngular MaterialAngular Material2Angular Problem Overview
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>
Angular Solutions
Solution 1 - Angular
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 - Angular
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 - Angular
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 - Angular
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 - Angular
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>