Components: mat-optgroup and mat-option don't support nested structure

[finalxcode]

Bug, feature request, or proposal:

mat-optgroup and mat-option don't support nested structure

What is the expected behavior?

i expect mat-optgroup and mat-option support nested structure

What are the steps to reproduce?

click it
open this url and replace template app/select-optgroup-example.htmlwith follow code:

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{ pokemon.viewValue }}
      </mat-option>

      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
        <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
          {{ pokemon.viewValue }}
        </mat-option>     
      </mat-optgroup>

    </mat-optgroup>
  </mat-select>
</mat-form-field>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.5.2
Node: 8.9.1
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.2
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

[bbonczek]

Is there some workaround atm?

[alecmce]

"Select with option group" in https://material.angular.io/components/select/examples is broken for me. It only displays one option group.

[AurelienVernay]

I'd like to know if there is some kind of workaround for that lack of features ? Seems like a lot of front dev can use one !

[trongnguyen1210]

Bug, feature request, or proposal:

mat-optgroup and mat-option don't support nested structure

What is the expected behavior?

i expect mat-optgroup and mat-option support nested structure

What are the steps to reproduce?

click it
open this url and replace template app/select-optgroup-example.htmlwith follow code:

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{ pokemon.viewValue }}
      </mat-option>

      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
        <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
          {{ pokemon.viewValue }}
        </mat-option>     
      </mat-optgroup>

    </mat-optgroup>
  </mat-select>
</mat-form-field>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.5.2
Node: 8.9.1
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.2
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

You uncheck [overflow: hidden] in class [mat-optgroup-label].

[fgouguenheim]

Hello.
This feature would be appreciated.
Is it planned to be implemented ?
Is there any workaround otherwise ?
Thank you

[Zakmy]

hi all,
I found a better workaround: just put another mat-select inside the mat-optgroup.
Here is my example:

<mat-form-field>
  <mat-select placeholder="YOURPLACEHOLDER" formControlName="YOURFORMCONTROL">

    <div *ngFor="let level1 of YOURDATA">
      <mat-optgroup *ngIf="level1.children else leaf"  [label]="level1.name">
        <mat-select>

          <div *ngFor="let level2 of level1.children">
            <mat-optgroup *ngIf="level2.children else leaf"  [label]="level2.name">
              <mat-select>

                <mat-option *ngFor="let level3 of level2.children" [value]="level3.type">{{level1.name + ' ' + level2.name + ' ' + level3.name}}</mat-option>

              </mat-select>
            </mat-optgroup>
            <ng-template #leaf>
              <mat-option [value]="level2.type">{{level1.name + ' ' + level2.name}}</mat-option>
            </ng-template>
          </div>

        </mat-select>
      </mat-optgroup>
      <ng-template #leaf>
        <mat-option [value]="level1.type">{{level1.name}}</mat-option>
      </ng-template>
    </div>

  </mat-select>
</mat-form-field>