Angular 6 Material mat-select change method removed

Question

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

User · Answer

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",

User · Answer

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    lt mat-select  valueChange   someFunction    gt    And this worked for me

User · Answer

For   1  mat-select  selectionChange   myFunction    works in angular as   sample component html    lt mat-select placeholder  Select your option    ngModel    option  name  action          selectionChange   onChange    gt        lt mat-option  ngFor  let option of actions   value   option  gt           option         lt  mat-option gt    lt  mat-select gt    sample component ts  actions   A   B   C    onChange         Do something     2  Simple html select  change   myFunction    works in angular as   sample component html   lt select  change   onChange      ngModel    regObj status  gt       lt option gt A lt  option gt       lt option gt B lt  option gt       lt option gt C lt  option gt   lt  select gt    sample component ts  onChange         Do something

User · Answer

If you re using Reactive forms you can listen for changes to the select control like so     this form get  mySelectControl   valueChanges subscribe value   gt        do stuff

User · Answer

The changed it from change to selectionChange      lt mat-select  change   doSomething  event   gt    is now   lt mat-select  selectionChange   doSomething  event   gt    https   material angular io components select api

[angular] Angular 6 Material mat-select change method removed

Examples related to angular

Examples related to angular6