Angular 6 Material mat-select change method removed

Question

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?

score 526 · Accepted Answer · answered May 07 '18 at 23:55

526

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

answered May 07 '18 at 23:55

VtoCorleone

16,813
5
37
51

37

I hate this so much. Yesterday I thought it was a cool day to upgrade to Angular 6. Once again, they changed the syntax. – Luis Lavieri Jul 17 '18 at 16:03
55

They need a `(changeEventChange)` event to detect when the change event changes. – Stack Underflow Feb 11 '19 at 16:57
8

(selectionChange) is now updated to (onSelectionChange). – Debadatta Feb 14 '19 at 10:11
1

@Debadatta - Where did you see this at? I still see `selectionChange` https://material.angular.io/components/select/api – VtoCorleone Feb 14 '19 at 14:56
4

All the comments above only further highlight why it makes sense to stick to a reactive forms appoach, as per my answer below, where possible. On a side note, I don’t think the comments are very fair because the Angular Material guys do an amazing job and we get it for free. – Joseph Simpson Feb 14 '19 at 23:00
@VtoCorleone I used both methods, selectionChange was not working, then I read in another stackOverflow answer, where it was mentioned. – Debadatta Feb 19 '19 at 11:21
– Gunjan Kumar Jun 24 '19 at 09:25

score 32 · Answer 2 · answered May 07 '18 at 22:40

32

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 ... })

answered May 07 '18 at 22:40

Joseph Simpson

4,054
1
24
28

1

It'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 09:06
1

Just to note here that if you need to `.updateValueAndValidity` the control don't forget to pass `{ emitEvent: false }` in order to avoid `RangeError: Maximum call stack size exceeded`. On the other hand thanks for hint (+1), it lead me to what I needed. – dcg Nov 07 '19 at 16:39
Should I unsubscribe in the ngOnDestroy if I follow the approach? – some1 here Aug 02 '20 at 07:30
1

You always need to cleanup your subscriptions to avoid memory leaks and unexpected behaviour. – Joseph Simpson Aug 02 '20 at 11:02
you can also go with `this.form.controls.yourControlName.valueChanges.subscribe(values => { console.log('new value', value); }` – JanBrus Jul 03 '23 at 11:06
@Joseph using your approach how can I get an index of the selected item? – Mark Jul 20 '23 at 15:00

score 18 · Answer 3 · answered Aug 26 '19 at 13:58

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
}

score 10 · Answer 4 · edited Aug 26 '19 at 13:46

10

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

edited Aug 26 '19 at 13:46

Kailas

7,350
3
47
63

answered Apr 22 '19 at 13:36

silverhash

880
8
21

I'm using a template form, and worked to me using the following: ` {{ manager.name }} ` – pcdro Apr 22 '19 at 21:13

score 4 · Answer 5 · answered Jan 23 '20 at 16:03

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

Thx for the answer, i was looking for this to get the value and viewValue from the html-binding. With selectionChange it does only send the value but not the viewValue via $event. — Benjamin Martin, Oct 03 '22 at 09:28

score 1 · Answer 6 · answered Jul 15 '21 at 01:34

1

For me ...(click)="myFunction()"... worked; nothing from above.

answered Jul 15 '21 at 01:34

vpap

1,389
2
21
32

score 0 · Answer 7 · answered Sep 02 '22 at 10:49

0

<mat-select (change)="doSomething($event)">

is now <mat-select (selectionChange)="doSomething($event)">

answered Sep 02 '22 at 10:49

Umer Baba

285
3
4

Angular 6 Material mat-select change method removed

7 Answers7

Linked