CODEWITHSUNDEEP
htmldomprimengangular7
Surendranath Sonawane
Surendranath Sonawane

Reputation: 1737

PrimeNG <p-menu> how to keep click menu item selected (Angular 7)

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?

Upvotes: 6

Views: 22591

Answers (6)

Khondwani Sikasote
Khondwani Sikasote

Reputation: 1

The easiest solution that worked for me was the following:

<a class="p-menu-item-link"
    [routerLink]="item.route"
    [routerLinkActive]="['active']"
  ></a>

Adding the routerLinkActive was what allowed me to have the menuItem selected at all times. Then you just need to play with the correct css values to get what you want.

Upvotes: 0

nasir taha
nasir taha

Reputation: 1449

I am using Angular 13.0.2 and Primeng 13.0.0

I add the following code to myComponent.component.css not global styles.scss

::ng-deep .p-menuitem-link-active{
  background-color: #FED201!important;
}

Upvotes: 3

Netanel David
Netanel David

Reputation: 11

html:

<p-menu 
    [model]="[
     { label: 'a', command: onClick() ,styleClass : getClassByLabel('a') },
     { label: 'b', command: onClick() ,styleClass : getClassByLabel('b') }
    ]"
><p-menu>

ts:

  currentModel: any;

  onClick() {
    return (event) => this.currentModel = event.item;
  }

  getClassByLabel(label: string): string {
    if (this.currentModel && this.currentModel.label == label) {
      return 'active';
    }
  }

style.css:

p-menu > div > ul > li.active > a > span {
  color: color:blue !important;
}

Upvotes: 1

Satish
Satish

Reputation: 31

For PrimeNG 10 I had to do tweak the code by Surendranath the following way:

Template:

<p-menu [model]="items" (click) = "activeMenu($event)"></p-menu>

Component:

  activeMenu(event) {
    //console.log(event.target.classList);
    let node;
    if (event.target.classList.contains("p-submenu-header") == true) {
      node = "submenu";
    } else if (event.target.tagName === "SPAN") {
      node = event.target.parentNode.parentNode;
    } else {
      node = event.target.parentNode;
    }
    //console.log(node);
    if (node != "submenu") {
      let menuitem = document.getElementsByClassName("p-menuitem");
      for (let i = 0; i < menuitem.length; i++) {
        menuitem[i].classList.remove("active");
      }
      node.classList.add("active");
    }
  }

Global Style (not Component Style)

.p-menuitem.active {
  background-color: orange;
}

Upvotes: 3

Grits
Grits

Reputation: 131

Thank you for this SURENDRANATH SONAWANE - first solution that worked for me after trying many others.

In case this helps anyone, I couldn't get my CSS class recognized, had to add the following notation in .css (note the :host >>> prefix)

:host >>> .active {
    background-color: #b8ebf5;
}

...also, for a default menu item, pre-select it in MenuIItem[] definition by setting styleClass, e.g.:

        this.items = [
           {label: 'Search' , url : '/#/query' , styleClass : 'active'}, // Default item
           {label: 'Stats'  , url : '/#/stats' },
           {label: 'User'   , url : '/#/user'  }
        ]

Upvotes: 2

Surendranath Sonawane
Surendranath Sonawane

Reputation: 1737

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")

}

Upvotes: 9

Related Questions