CODEWITHSUNDEEP
angularangular-material
Tetiana
Tetiana

Reputation: 361

mat-select selectionChange get group angular

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?

Upvotes: 0

Views: 8979

Answers (4)

KcH
KcH

Reputation: 3502

If the event handler is added to mat-select then we could get the value of label inside selected as, event.source.selected.group.label

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

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

Upvotes: 0

lingar
lingar

Reputation: 603

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"}
  }

Upvotes: 0

ustad
ustad

Reputation: 539

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

Upvotes: 3

G. Tranter
G. Tranter

Reputation: 17918

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

Upvotes: 7

Related Questions