How to know if a mat-option is selected or not from a click event?

Question

I have a multiple mat-select and would like to know if the mat-option that's been clicked has been selected or deselected. The $event.target object passed when the (click) is fired has no selected attribute I could use.

<mat-form-field>
    <mat-select [formControl]="control" multiple>
        <mat-option 
          *ngFor="let option of options" 
          [value]="option"
          (click)="foo($event)"
        >
        {{ option }}
        </mat-option>
    </mat-select>
</mat-form-field>

public foo(event) {
    const hasBeenChecked = ???? // How do I know if my clicked option has been checked or unchecked?
}

Thanks in advance

Answer 1

You can get the selected state of the clicked option by reading it off of the MatOption object as follows:

<mat-option #matOption (click)="foo(matOption.selected)"></mat-option>

StackBlitz Example