Angular 6 Material mat-select change method removed
In Angular Material Design 6, the (change) method was removed. How should I replace the change method to execute code in the component when the user changes selection?
The changed it from change
to selectionChange
.
<mat-select (change)="doSomething($event)">
is now
<mat-select (selectionChange)="doSomething($event)">
https://material.angular.io/components/select/api
If you're using Reactive forms you can listen for changes to the select control like so..
this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
For:
1) mat-select (selectionChange)="myFunction()"
works in angular as:
sample.component.html
<mat-select placeholder="Select your option" [(ngModel)]="option" name="action"
(selectionChange)="onChange()">
<mat-option *ngFor="let option of actions" [value]="option">
{{option}}
</mat-option>
</mat-select>
sample.component.ts
actions=['A','B','C'];
onChange() {
//Do something
}
2) Simple html select (change)="myFunction()"
works in angular as:
sample.component.html
<select (change)="onChange()" [(ngModel)]="regObj.status">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
sample.component.ts
onChange() {
//Do something
}
For me (selectionChange)
and the suggested (onSelectionChange)
didn't work and I'm not using ReactiveForms
. What I ended up doing was using the (valueChange)
event like:
<mat-select (valueChange)="someFunction()">
And this worked for me