Regarding menu and sub menu using json

Question

Dear all,

 

I hope everyone is well. I am building menu using json object in Angular 11.

I am able to do upto single level.

What I want is if there is any sub menu then it should be open on hover.

 

eg. :-

 

master => user

 

what I am expecting is :-

 

master => user => 1. Staff   2. Student

 

If I hover on Staff then it contains again sub menu like Non Teaching and Teaching and so on.

 

here I have piece of code :-

<ul class="chk-nav">
   <li class="nav-item" menuToggleLink *ngFor="let menuitem of menuItems.getAll()"
      [ngClass]="{'menu-item-has-child': menuitem.type=='sub'}">
         <a target="_blank" href="{{menuitem.state}}"
            *ngIf="menuitem.type === 'ext-link'" tourAnchor="tour-ui">
               <i class="{{ menuitem.icon }}"></i>
               <p class="text-nowrap mb-0">
                  <span>{{ menuitem.name | translate }}</span>{{menuitem.label}}
               </p>
         </a>
         <a menuToggle [routerLink]="['/', menuitem.state]"          routerLinkActive="activelink" *ngIf="menuitem.type === 'link'">
            <i class="{{ menuitem.icon }}"></i>
               <p class="text-nowrap mb-0">
                  <span>{{ menuitem.name | translate }}</span>
               </p>
               <ng-container *ngIf="menuitem.label">
                  <span class="sidebar-label">{{menuitem.label}}</span>
               </ng-container>
         </a>
         <a menuToggle href="javascript:void(0)" *ngIf="menuitem.type === 'sub'">
            <i class="{{ menuitem.icon }}"></i>
            <p class="text-nowrap mb-0">
               <span>{{ menuitem.name | translate }}</span>
            </p>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            <ng-container *ngIf="menuitem.label">
               <span class="sidebar-label">{{menuitem.label}}</span>
            </ng-container>
         </a>
         <ul class="sub-menu chk-nav" *ngIf="menuitem.type === 'sub'">
         <li class="nav-item" *ngFor="let childitem of menuitem.children" routerLinkActive="open">
            <a [routerLink]="['/', menuitem.state, childitem.state ]" routerLinkActive="active-link">
               <i class="icon icon-arrows-right-double"></i>
               <p class="text-nowrap mb-0"><span>{{ childitem.name | translate}}</span></p>
               <ng-container *ngIf="childitem.label">
                  <span class="sidebar-label">{{childitem.label}}</span>
               </ng-container>
            </a>
         </li>
         </ul>
   </li>
</ul>

Menu

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

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

const MENUITEMS = [
 {
  state: 'dashboard',
  name: 'DASHBOARD',
  type: 'link',
  icon: 'icon-speedometer icons',
  label: 'New'
 },
 {
  state: 'courses',
  name: 'COURSES',
  icon: 'icon-graduation icons',
  label: 'New',
  type: 'sub',
  children: [
   { state: 'courses', name: 'COURSES' },
   { state: 'course-detail', name: 'COURSE DETAIL' },
   { state: 'course-signin', name: 'SIGN IN' },
   { state: 'course-payment', name: 'PAYMENT' }
  ]
 },
 {
  state: 'user',
  name: 'MANAGEMENT',
  type: 'sub',
  icon: 'icon-organization icons',
  label: 'New',
  children: [
   { state: 'management-list', name: 'USER LIST' },
   { state: 'management-grid-list', name: 'USER GRID' }
  ]
 }
];

Please suggest me how can I achieve this.

Thanking you,

Regards.