If we open a submenu in the menu, it is always closed when the subMenu is clicked.
Where and how is this handled? How can we leave the subMenu open?
V11.0.1 always closing subMenus
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
Could you try to add routerLink to parent menuitem if it doesn't have routerLink item? Like the below code;
Best regards,
Merve Özçifçi
Could you try to add routerLink to parent menuitem if it doesn't have routerLink item? Like the below code;
Code: Select all
label: 'UI Kit', icon: 'pi pi-fw pi-star', routerLink: ['/uikit'],
items: [
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
Merve Özçifçi
-
- Posts: 4
- Joined: 29 Sep 2021, 11:15
This is my current menu item for the maintenance root item.
I do add it dynamically based on user permissions, but this shouldn't affect the closing of the submenu right?
I have tried changing the route to a single string value like your example but its the same result
I do add it dynamically based on user permissions, but this shouldn't affect the closing of the submenu right?
Code: Select all
const maintenanceMenuItem: MenuItem = {
label: 'Maintenance',
icon: 'pi pi-fw pi-cog',
routerLink: ['dashboard', 'maintenance'],
items: [
{
label: 'Playlists',
icon: 'pi pi-fw pi-play',
routerLink: [
'dashboard',
'maintenance',
'playlists'
]
},
{
label: 'Dashboards',
icon: 'pi pi-fw pi-table',
routerLink: [
'dashboard',
'maintenance',
'dashboards'
]
},
{
label: 'Widgets',
icon: 'pi pi-fw pi-chart-bar',
routerLink: [
'dashboard',
'maintenance',
'widgets'
]
}
]
};
-
- Posts: 4
- Joined: 29 Sep 2021, 11:15
I've managed to find a solution to this in my project.
In menu component where you have this method
if I change it to the following:
It now works. I'm not 100% sure why.
What I have noticed is that router.isActive always returns false so it always sets the value to false.
It might possibly be because the route I'm specifying looks like this:
`dashboard/maintenance/dashboards`
but the full path of the app for that route is:
`app/dashboard/maintenance/dashboards`
My base is at /app and not exactly matching the menu items I've set up. That is why I have them as relative routes (no forward slash)
So what I think is happening is that angular is actually matching the route and applying the router link active class, instead of the app-menu-item.component.ts
In menu component where you have this method
Code: Select all
updateActiveStateFromRoute() {
this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
}
Code: Select all
updateActiveStateFromRoute() {
this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
}
What I have noticed is that router.isActive always returns false so it always sets the value to false.
It might possibly be because the route I'm specifying looks like this:
`dashboard/maintenance/dashboards`
but the full path of the app for that route is:
`app/dashboard/maintenance/dashboards`
My base is at /app and not exactly matching the menu items I've set up. That is why I have them as relative routes (no forward slash)
So what I think is happening is that angular is actually matching the route and applying the router link active class, instead of the app-menu-item.component.ts
-
- Information
-
Who is online
Users browsing this forum: No registered users and 13 guests