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);
}

Answer 2

I ran into this issue as well, but keep in mind, the expected behavior of onSelectionChanged() is the following: A selection change event is fired not only when an option is selected but also when it is deselected . So when an option is selected, two events are fired: the users selection and the option that is now deselected. As such, you'll see 2 events being fired. The first of which is the desired one. You can see if event.isUserInput is set to true (desired event) and also send in the group.name to the event handler:

In your component html:

 <mat-select formControlName="category" required> <mat-optgroup *ngFor="let group of categoryGroups" [label]="group.name"> <mat-option *ngFor="let category of group.options" [value]="category.value" (onSelectionChange)="onCategorySelection($event, group.name)"> {{category.viewValue}} </mat-option> </mat-optgroup> </mat-select>

And the function you bind to the event in the component class:

 onCategorySelection(event: MatOptionSelectionChange, groupName: string) { if (event.isUserInput) { this.groupName = groupName; // event.source.group.label; } }

Answer 3

I also think it's little funny that the mat-feature doesn't give an easy access to the group values, because it's all the idea of group to separate the select options to some groups and in many cases the use case is to wrap at the logic level the group data with the options selected.

That's my solution:

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)" >
    <mat-option >-- None --</mat-option>
    <mat-optgroup  #group1 *ngFor="let group of filterData" [label]="group.viewValue"
                   style = "background-color: #0c5460">
      <mat-option #mmm *ngFor="let option of group.options" [value]="{value: option.value, groupValue: group.value}" >
        {{option.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

and the function :

doSomething1(value: any){
    console.log("do something with ", value);//result: {value: "Honda", groupValue: "cars"}
  }