I want to create nested "mat-option" in "mat-select"

Question

I'm developing a web app, and have a sample data that looks like this as a ts file:

/** Example file/folder data. */
export const files = [
  {
    name: 'privatec-omponents',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'private-src',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          {
            name: 'private-cdk',
            type: 'folder',
            date: '11/21/2020',
            kind: 'folder',
            size: '--',
            children: [
              { name: 'private-package.json', type: 'file', date:'11/21/2020',kind: 'json', size: '2MB' },
              { name: 'private-BUILD.bazel', type: 'file', date: '11/21/2020', kind: 'bazel', size: '2MB' },
            ]
          },
          { name: 'private-material', type: 'folder', date: '11/21/2020', kind: 'folder', size: '--' }
        ]
      }
    ]
  },
  {
    name: 'private-angular',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'private-packages',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          { name: 'private-travis.yml', type: 'file', date: '11/21/2020', kind: 'yml', size: '2MB' },
          { name: 'firebase.json', type: 'file', date: '11/21/2020', kind: 'json', size: '2MB' }
        ]
      },
      { name: 'private-package.json', type: 'file', date: '11/21/2020', kind: 'json', size: '--' }
    ]
  }
];

I want to show all folder names as "mat-select" to let users choose the file directory to save their files, however, currently, only parent folders are displayed. Is there any way that I can display all folders in the "mat-option"? I also want to add padding if the folder has a parent folder?

This is how HTML looks like.

<mat-form-field>
    <mat-label>Drirectry Name</mat-label>
    <mat-select name="fileName" [(value)]="selectedCountry" placeholder="Country">
      <mat-option *ngFor="let file of file" [value]="file.name">
        {{file.name}}
      </mat-option>
    </mat-select>
</mat-form-field>

This is how it appears on the web.

How can I do them?

Answer 1

You actually want to wrap your mat-option in a mat-optgroup for any nested values

Example :

<mat-select [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>
  </mat-select>

See Select with option groups in the docs: https://material.angular.io/components/select/examples