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

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

[micvolo]

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>

[fgouguenheim]

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