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 :-
-
- [ngClass]="{'menu-item-has-child': menuitem.type=='sub'}">
-
- *ngIf="menuitem.type === 'ext-link'" tourAnchor="tour-ui">
-
-
- {{ menuitem.name | translate }}{{menuitem.label}}
-
-
-
- {{ menuitem.name | translate }}
-
-
-
-
-
- {{ menuitem.name | translate }}
-
-
-
-
-
-
-
-
-
-
- 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.
Sachin SinghPosted Jan 7, 2021, 8:37 AM
Kiran MohantyPosted Jan 7, 2021, 8:40 AM