UPDATE December 19, 2018
Visit the most recent stackblitz here for a solution that replicates the desired behavior shown in this image.
December 18, 2018
It's unclear to me what exactly you want to achieve, but I've quickly put together a stackblitz. Of course, some styling adjustments may be needed to blend the dropdowns/options seamlessly with your existing styles.
Modifications in tab-group-basic-example.ts
{
id: 2, // Level 1
options: [
{
option: 'Dropdown featuring 5 choices',
route: '/Submenu1',
options: [
{ label: "Choice 1", route: "/Submenu1" },
{ label: "Choice 2", route: "/Submenu2" },
{ label: "Choice 3", route: "/Submenu3" },
{ label: "Choice 4", route: "/Submenu4" },
{ label: "Choice 5", route: "/Submenu5" },
]
},
{
option: 'Dropdown with 2 choices',
route: '/Submenu4',
options: [
{ label: "Choice 1", route: "/Submenu1" },
{ label: "Choice 2", route: "/Submenu2" }
]
},
]
}
I introduced an options property containing an array of choices for your dropdown menu, each with a display label and corresponding navigation route. When this property is present, a mat-select element will be rendered instead of a mat-list-item.
Modifications in tab-group-basic-example.html
<a mat-list-item *ngIf="!rootOption.rootTab && !rootOption.options"
[routerLink]="rootOption.route"
routerLinkActive="active">
{{rootOption.option}}
</a>
<mat-select *ngIf="rootOption.options"
placeholder="Select an Option">
<mat-option *ngFor="let option of rootOption.options"
[routerLink]="option.route"
[value]="option.label">
{{option.label}}
</mat-option>
</mat-select>
Simply put, it checks if the specified options are defined. If yes, a mat-select component will be displayed with the provided choices; if not, a regular mat-list-item will be shown as usual.