Angular Mat Select Multiple selectionchange findin

Question

I have a mat select with multiple options. However I need to know when the selection changes, what the exact change was.

For instance if 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">for</mat-option>
</mat-select>

When selectionChange is fired it returns what the new selection is. But I need to know what the new value that is being changed is. How do I access that ?

For instance, if 1 and 3 are selected and then a user picks 4, I need to know that they picked 4 but I don't see a way of accessing that in the event info.

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

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

Answer 1

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