CODEWITHSUNDEEP
angulartypescriptangular-materialangular5components
S. A
S. A

Reputation: 543

Angular 5 Material How to add Dropdowns to a Multi-level Carousel style SideNav?

enter image description here Hello World, I have a sidenav that basically works with tabs, just the effect I wanted to achieve in transition. But now I would like to add that by clicking on "Option 1, Option 2 or Option 3" make this transition from the tab, but the two options that would come out now, are dropdowns with 5 options and 2 options (When opening the dropdown) But I can not find the way to achieve it. Does anyone have any idea where to start or something like that?

Here is my code: https://stackblitz.com/edit/angular-x5xefi-xbxn4i

Upvotes: 1

Views: 1078

Answers (1)

Fabian Küng
Fabian Küng

Reputation: 6183

EDIT 19.12.2018

See latest stackblitz here for a solution that mimics the desired behaviour like this.

18.12.2018

I am not sure I understand what you want to achieve exactly, but here is a quick and dirty stackblitz I have put together. Obviously you would have to style the dropdowns/options a bit to make it look more natural and in line with your other styles.

Changes in tab-group-basic-example.ts

{
  id: 2, // 1st level
  options: [
    { 
      option: 'Dropdown with 5 options', 
      route: '/Submenu1', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" },
        { label: "Option 3", route: "/Submenu3" },
        { label: "Option 4", route: "/Submenu4" },
        { label: "Option 5", route: "/Submenu5" },
      ]        
    },
    // { option: 'TestJustIgnore', route: '/Submenu2' },
    // { option: 'TestJustIgnore', route: '/Submenu3' },
    { 
      option: 'Dropdown with 2 options', 
      route: '/Submenu4', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" }
      ]  
    },
    // { option: 'TestJustIgnore', route: '/Submenu5' },
  ]
}

I added an options property which contains an array of options for your dropdown with a text label to display as an option and the route to which it should navigate. When this property is set, instead of a mat-list-item a mat-select element will be rendered with the options defined.

Changes in the 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>

Basically it checks whether the above mentioned options are defined, if yes, then a mat-select element will be rendered with the provided options, if not, then a normal mat-list-item will be rendered as normal.

Upvotes: 2

Related Questions