disableOptionCentering: boolean. Whether to center the active option over the trigger. @Input() disableRipple: boolean. Whether ripples are disabled.
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
I have this issue today with mat-option-group. The thing which solved me the problem is using in other provided event of mat-select : valueChange
I put here a little code for understanding :
<mat-form-field >
<mat-label>Filter By</mat-label>
<mat-select panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)"> <!-- (valueChange)="doSomething1(choosedValue.value)" instead of (change) or other event-->
<mat-option >-- None --</mat-option>
<mat-optgroup *ngFor="let group of filterData" [label]="group.viewValue"
style = "background-color: #0c5460">
<mat-option *ngFor="let option of group.options" [value]="option.value">
{{option.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
Mat Version:
"@angular/material": "^6.4.7",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With