Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
C# Corner Home
Technologies
Monthly Leaders
ASK A QUESTION
Forumguidelines
Mandar Shinde
1.6k
408
52.3k
Regarding menu and sub menu using json
Jan 7 2021 6:06 AM
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.
Reply
Answers (
2
)
Create Reusable HTML & Download & Use in anywhere in other projects
PDF generation in angular for