I am using primeNg component in angular 7 project.
<p-menu [model]="items" ></p-menu>
while dealing with this component we don't have access to its internal structure to show click menu item as selected. to push active class when a certain menu will be selected and change its color.
Does anybody have any idea about this?
After some research I found a solution to deal with this problem.
Html:
<p-menu [model]="items" (click) = "activeMenu($event)"></p-menu>
on click of menu component i have added activeMenu($event) method. $event carries clicked DOM element which is the menu item element.
Component:
On component, I have written the following code.
activeMenu(event) {
let node;
if (event.target.tagName === "A") {
node = event.target;
} else {
node = event.target.parentNode;
}
let menuitem = document.getElementsByClassName("ui-menuitem-link");
for (let i = 0; i < menuitem.length; i++) {
menuitem[i].classList.remove("active");
}
node.classList.add("active")
}