how to create a menu with sub-menu using angular 5

Question

I'm using angular 5 material and I have a JSON object containing menu and submenu's data. how should I do it? I can show the items with type= link or sub but I don't know how to show the children. I want to show the child items when clicking on the parent. I used mat-nav-list and mat-list-item to show them but I don't know how to show the children.

here is the object:

    import { Injectable } from '@angular/core';

export interface ChildrenItems {
    state: string;
    name: string;
    type?: string;
  }

export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    children?: ChildrenItems[];
}

const MENUITEMS = [
    {
        state: 'dashboard',
        name: 'Dashboard',
        type: 'link',
        icon: 'dashboard'
    },
    {
        state: 'setting',
        name: 'Settings',
        type: 'sub',
        icon: 'settings',
        children: [
            {
                state: 'station_management',
                name: 'Station Management',
                type: 'parent',
                grand_children: [
                    { state: 'station', name: 'Station' },
                    { state: 'shifts_work', name: 'Shifts Work' },
                    { state: 'fuel_price', name: 'Fule Price' },
                    { state: 'tank_management', name: 'Tank Management' }
                ]
            }
        ]
    }
];

@Injectable()
export class MenuItems {
    getMenuitem(): Menu[] {
        return MENUITEMS;
    }
}

The official angular material docs have an example of nested menus: material.angular.io/components/menu/overview — bugs
– bugs, Commented Apr 18, 2018 at 9:45
@bugs i want to do it with the lists. when i use menus, the sub-menu is opening on the button, but I what the submenu to open under the parent item and it shouldn't be a button — fariba.j
– fariba.j, Commented Apr 18, 2018 at 9:48
So maybe what you are looking for is an expansion panel? material.angular.io/components/expansion/overview — bugs
– bugs, Commented Apr 18, 2018 at 9:55
@bugs no, i used list-items before but now i cannot do it with material 5, i added the image that i want to do — fariba.j
– fariba.j, Commented Apr 18, 2018 at 10:20
@bugs as you see in the image, Ecommerce is the head menu and Products is children — fariba.j
– fariba.j, Commented Apr 18, 2018 at 10:25

G. Tranter · Accepted Answer · 2018-04-18 15:22:14Z

All you need to do is place your submenu in a container DIV and expand or collapse the container when you click on the parent menu icon. Here is a simple example - you may want to implement things differently, but the idea is the same.

showSubmenu: boolean = false;

<mat-list>
  <mat-list-item>
    Parent Menu
    <button mat-button mat-icon-button (click)="showSubmenu = !showSubmenu">
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}">expand_more</mat-icon>
    </button>
  </mat-list-item>
  <div class="submenu" [ngClass]="{'expanded' : showSubmenu}">
    <mat-list-item>Submenu Item 1</mat-list-item>
    <mat-list-item>Submenu Item 2</mat-list-item>
    <mat-list-item>Submenu Item 3</mat-list-item>
  </div>
</mat-list>


.menu-button {
  transition: 300ms ease-in-out;
  transform: rotate(0deg);
}
.menu-button.rotated {
  transform: rotate(180deg);
}
.submenu {
  overflow-y: hidden;
  transition: 300ms ease-in-out;
  height: 0;
}
.submenu.expanded {
  height: 144px;
}

Collectives™ on Stack Overflow

how to create a menu with sub-menu using angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related