when Child menu items are being selected, parent menu item is not being shown as active/highlighted.
I am using prestige theme and the template came with default code for menu.
How can we make the parent menu item active on selecting child item and how do we remove the selection when we select another menu item?
Priming prestige template came with a default app menu component but its not highlighting the parent menu item.
The model for the menu items is as below:
this.model = [
{ label: 'label1', icon: 'pi pi-fw pi-home', routerLink: ['/somelink'] },
{
label: 'label2', icon: 'pi pi-fw pi-dollar', routerLink: ['/components'],
items: [
{ label: 'Sub Menu', icon: 'pi pi-fw pi-dollar', routerLink: ['/somelink'] },
]
},
{
label: 'label3', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/components'],
items: [
{ label: 'Sub Menu', icon: 'pi pi-fw pi-chart-pie', routerLink: ['/somelink'] },
]
}
];
Above is the model for menu items and the html for this is
<div class="layout-menu-wrapper fadeInDown">
<ul class="layout-menu">
<li app-menuitem *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="false" (click)="navigate(item)">
</li>
</ul>
i added a click function to the list item and trying to make the parent menu item active and i am successful
but i am not able to remove the activeness of the item when I select another menu item
I observed that making the routerlink attribute value to empty makes the parent menu item active and removing the routerlink attribute removes the activeness but removing the highlighting is not working with the function i added on item click.
the function I added is like this:
public navigate(selectedMenuItem)
{
if (selectedMenuItem.label === "Admin")
{
this.activeItem = selectedMenuItem;
this.activeItem.routerLink[0] = ' ';
}
else
if (selectedMenuItem.label !== "Admin")
{
let menuItem: any[ ] = ['/components'];
this.model.forEach(function (item)
{
if (item.label === "Admin")
{
//item.routerLinkActiveOptions = "{exact: true}"
delete item.routerLink;
//item.routerLink[0] = menuItem;
}
});
}
}