In Angular Material Design 6, the (change) method was removed. I cant find how to replace the change method to execute code in the component when the user change selection Thanks!
77
angular
add a comment
222
The changed it from change to selectionChange.
<mat-select (change)="doSomething($event)">
is now
<mat-select (selectionChange)="doSomething($event)">
16
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 ... })
- 1It's worth noting that using the above reactive forms approach you are less tied to the UI and less likely to have problems as that UI framework evolves – Joseph Simpson May 31 '18 at 9:06
1
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
- I'm using a template form, and worked to me using the following:
<mat-select placeholder="Select an option" [(ngModel)]="project.managerId" name="managerId" required (selectionChange)="fillComanager(project.managerId)"> <mat-option *ngFor="let manager of managers" [value]="manager.id"> {{ manager.name }} </mat-option> </mat-select>– pcdro Apr 22 at 21:13
1
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
}
(selectionWhenTheUserChangesSomething)="doSomething($event)". Angular always finds way to get hated – KhoPhi Aug 20 '18 at 21:45selectionChange– Daniel Dudas Dec 14 '18 at 13:31(changeEventChange)event to detect when the change event changes. – Stack Underflow Feb 11 at 16:57