2
Answers

Regarding menu and sub menu using json

Mandar Shinde

Mandar Shinde
4y
1.8k
1
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 :-
  1. <ul class="chk-nav">  
  2.    <li class="nav-item" menuToggleLink *ngFor="let menuitem of menuItems.getAll()"  
  3.       [ngClass]="{'menu-item-has-child': menuitem.type=='sub'}">  
  4.          <a target="_blank" href="{{menuitem.state}}"   
  5.             *ngIf="menuitem.type === 'ext-link'" tourAnchor="tour-ui">  
  6.                <i class="{{ menuitem.icon }}"></i>  
  7.                <p class="text-nowrap mb-0">  
  8.                   <span>{{ menuitem.name | translate }}</span>{{menuitem.label}}  
  9.                </p>  
  10.          </a>  
  11.          <a menuToggle [routerLink]="['/', menuitem.state]"          routerLinkActive="activelink" *ngIf="menuitem.type === 'link'">  
  12.             <i class="{{ menuitem.icon }}"></i>  
  13.                <p class="text-nowrap mb-0">  
  14.                   <span>{{ menuitem.name | translate }}</span>  
  15.                </p>  
  16.                <ng-container *ngIf="menuitem.label">  
  17.                   <span class="sidebar-label">{{menuitem.label}}</span>  
  18.                </ng-container>  
  19.          </a>  
  20.          <a menuToggle href="javascript:void(0)" *ngIf="menuitem.type === 'sub'">  
  21.             <i class="{{ menuitem.icon }}"></i>  
  22.             <p class="text-nowrap mb-0">  
  23.                <span>{{ menuitem.name | translate }}</span>  
  24.             </p>  
  25.             <i class="fa fa-caret-down" aria-hidden="true"></i>  
  26.             <ng-container *ngIf="menuitem.label">  
  27.                <span class="sidebar-label">{{menuitem.label}}</span>  
  28.             </ng-container>  
  29.          </a>  
  30.          <ul class="sub-menu chk-nav" *ngIf="menuitem.type === 'sub'">  
  31.          <li class="nav-item" *ngFor="let childitem of menuitem.children" routerLinkActive="open">  
  32.             <a [routerLink]="['/', menuitem.state, childitem.state ]" routerLinkActive="active-link">  
  33.                <i class="icon icon-arrows-right-double"></i>  
  34.                <p class="text-nowrap mb-0"><span>{{ childitem.name | translate}}</span></p>  
  35.                <ng-container *ngIf="childitem.label">  
  36.                   <span class="sidebar-label">{{childitem.label}}</span>  
  37.                </ng-container>  
  38.             </a>  
  39.          </li>  
  40.          </ul>  
  41.    </li>  
  42. </ul> 
  1. Menu  
  2.   
  3. export interface ChildrenItems {  
  4.  state: string;  
  5.  name: string;  
  6.  type?: string;  
  7.  label?: string;  
  8. }  
  9.   
  10. export interface Menu {  
  11.  state: string;  
  12.  name: string;  
  13.  type: string;  
  14.  icon: string;  
  15.  label?: string;  
  16.  children?: ChildrenItems[];  
  17. }  
  18.   
  19. const MENUITEMS = [   
  20.  {  
  21.   state: 'dashboard',  
  22.   name: 'DASHBOARD',  
  23.   type: 'link',  
  24.   icon: 'icon-speedometer icons',  
  25.   label: 'New'  
  26.  },  
  27.  {  
  28.   state: 'courses',  
  29.   name: 'COURSES',  
  30.   icon: 'icon-graduation icons',  
  31.   label: 'New',  
  32.   type: 'sub',  
  33.   children: [  
  34.    { state: 'courses', name: 'COURSES' },  
  35.    { state: 'course-detail', name: 'COURSE DETAIL' },  
  36.    { state: 'course-signin', name: 'SIGN IN' },  
  37.    { state: 'course-payment', name: 'PAYMENT' }  
  38.   ]  
  39.  },  
  40.  {  
  41.   state: 'user',  
  42.   name: 'MANAGEMENT',  
  43.   type: 'sub',  
  44.   icon: 'icon-organization icons',  
  45.   label: 'New',  
  46.   children: [  
  47.    { state: 'management-list', name: 'USER LIST' },  
  48.    { state: 'management-grid-list', name: 'USER GRID' }  
  49.   ]  
  50.  }  
  51. ];  
Please suggest me how can I achieve this.
Thanking you,
Regards. 
Answers (2)
Next Recommended Forum