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;
    }
}

Answer 1

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;
}