47

I have a <mat select> with the multiple option set (a multi-select). When the selectionChange event fires I need to know which option has been checked or unchecked, however, it only returns the new current list of selected options.

For instance I have a list:

<mat-select (selectionChange)="change($event)" multiple placeholder="Select">
  <mat-option value="1">one</mat-option>
  <mat-option value="2">two</mat-option>
  <mat-option value="3">three</mat-option>
  <mat-option value="4">four</mat-option>
</mat-select>

If options one, three and four are checked and then the user unchecked option four, in the event handler I need to know which option triggered the event (i.e. option four) and its new state. I currently don't see a way of accessing that information in the selectionChange event.

https://stackblitz.com/edit/angular-1e9gsd?file=app/select-overview-example.ts

I tried putting the event handler (selectionChange)="change($event)" on the <mat-option> but it doesn't seem to be supported.

Curtis
  • 3,170
  • 7
  • 28
  • 44
  • 1
    Do you have in the event, console.log(event.value); – Nestor May 31 '18 at 00:22
  • ``new selection`` is not the ``new value`` ? can you explain ? ``console.log(event.value);`` looks good to me. it looks like you have to clarify your question. – HDJEMAI May 31 '18 at 01:09
  • sorry. I messed up the example... it was suppose to be a multi select, like the title says... fixed the example now. Event.value gives back an array of everything selected. I just want the new thing that was selected, preferably without caching the old selected value and doing a compare to find whats changed. – Curtis May 31 '18 at 03:39

3 Answers3

83

I needed to use onSelectionChange on the <mat-option>, which is different than the selectionChange that you can use on the <mat-select>

It would be nice if that was in the documentation for mat-select.

Here it is working https://stackblitz.com/edit/angular-1e9gsd-34hrwg?file=app/select-overview-example.html

Curtis
  • 3,170
  • 7
  • 28
  • 44
  • Do you know where any documentation is for the mat-option? I could only find the API for the mat-select – Nick Gallimore Sep 04 '19 at 19:46
  • 1
    @NickGallimore I also couldnt find any documentation for `` – Curtis Sep 06 '19 at 13:42
  • @Curtis Upvote this issue https://github.com/angular/components/issues/8790 For the meantime you can use this to see which Output and Input the component has https://github.com/angular/components/blob/master/src/material/core/option/option.ts – Nick Gallimore Sep 06 '19 at 13:57
  • This approach works but fires so many events unnecessarily so it is not an excellent approach to go with – Aman Kumar Gupta Feb 10 '23 at 08:05
10

Here is alternative solution. onSelectionChange event is fired before [(ngModel)] is bound. In my case, I needed both bound data and last selected value.

<mat-select
  multiple
  [(ngModel)]="selectedValues"
  name="hebele"
  #select
>
  <mat-option
    *ngFor="let value of data.Values"
    (click)="yourMethod(matOption)"
    [value]="value"
    #matOption
  >
    {{value.Text}}
  </mat-option>
</mat-select>

yourMethod(data: any) {
  let lastSelectedValue = data.value;
  const isChecked = data.selected;
}
PaulBunion
  • 346
  • 2
  • 18
M.Erkan Çam
  • 173
  • 1
  • 7
-2

This worked for me. blahs is an array of strings in this case. Use 2-way binding: 

<mat-select placeholder="choose..." [(value)]="selected" 
      (selectionChange)="somethingChanged(selected)">
  <mat-option *ngFor="let b of blahs; index as i;" value={{b[i]}}">{{b[i]}}
  </mat-option>
</mat-select>
Plasty Grove
  • 2,807
  • 5
  • 31
  • 42
  • This is a standard select. The question is referring to a multi select. This proposed solution would output only the current value of the multi select. Not which option was checked or unchecked during a change selection change event. – Curtis Jul 23 '19 at 18:38