0

Can you make an optgroup selectable?

<mat-form-field class="h-1 text-xs w-full">
    <mat-select formControlName="source">
        <mat-option [value]="defaultSource">All</mat-option>
        <mat-optgroup *ngFor="let source of sources"
            [label]="source.source">
            <mat-option *ngFor="let subSource of source.subSources"
                [value]="{'source': source.source,'type': subSource.name}">
                {{ subSource.name }}
            </mat-option>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

I want to be able to select the top-level option and not just the children. Is it possible? Or is there a workaround for this?

TheGPWorx
  • 857
  • 3
  • 17
  • 37

1 Answers1

2

An optgroup can't be made selectable. Only mat-option can be selected. But we can use a workaround by keeping all items in the select as mat-options and add some custom style to differentiate groups. You can refer the accepted answer for a similar question from this link.

Or you can think of using ng-select (link), Groups can be made selectable.

Sohan
  • 66
  • 1
  • 4