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

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