Angular Mat Select Multiple selectionchange finding which option was changed

Question

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.

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

Answer 2

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

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