How to get the deselected value from mat-select

Question

I have a mat-table, inside the table i have this mat-select:

<mat-select multiple placeholder="{{element.name}}" [(value)]="selectedCol" (selectionChange)="selectionChange($event)" [disabled]="!selection.isSelected(element.id)">
          <div *ngFor="let item of col">
            <div *ngIf="item.Id === element.id">
              <mat-option [value]="item.id"> 
                {{item.name}}
              </mat-option>
            </div>
          </div>
</mat-select>

I need to get the value that was deselected, so i can remove it from the list of selected values, because every row in my table is saved in one variable on "selectionChange".

Answer 1

On Html side

(selectionChange)="selectionChange($event)"

on ts Side

selectionChange(event: MatSelectChange) {
      console.log(event.value)
}

where value is list of objects (array)

Answer 2

I need to get the value that was deselected, so i can remove it from the list of selected values, because every row in my table is saved in one variable on "selectionChange".

Why?? Angular make the work for you. Use [(ngModel)] or a FormControl

<mat-form-field>
  <mat-select placeholder="Toppings" [(ngModel)]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>
{{toppings|json}}

//in your .ts
toppings:any[]=[]

or

<mat-form-field>
  <mat-select placeholder="Toppings" [(formControl)]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>
{{toppings.value|json}}
//in your .ts
  toppings = new FormControl();

Answer 3

I figured it out. I needed the deselected value because I have more mat-selects with the same ngModel/value. To solve it i used the SelectionModel Class.