mat-select selectionChange get group angular

Question

I have control mat-select with two mat-optgroup groups which has an event handler (selectionChange)="applicationSelected($event.value, i).

How can I detect from which group an option was selected?

Answer 1

There isn't an easy, direct way to know the group from the selectionChange event. It only tells you the source (MatSelect) and the selected value. But the onSelectionChange event of MatOption gives you access to the MatOption which in turn gives access to the MatOptionGroup. For example:

<mat-option (onSelectionChange)="optionSelected($event)" ...>...</mat-option>

optionSelected(event: MatOptionSelectionChange) {
    console.log(event.source.group.label);
}