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

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

}

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;
}

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'  }
        ]

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;
}

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;
}