Regarding menu and sub menu using json

Question

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 :-

menu.component.html

   <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.ts code is as follows :-

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

Answer 1

等待大神答复