CODEWITHSUNDEEP
angularprimeng
Sakti Behera
Sakti Behera

Reputation: 107

PrimeNG Panelmenu active state for menu items and submenu items?

I am using Angular 7 and PrimeNg version "7.1.0-rc.1". Currently I am trying to integrate PanelMenu component but unable to set styles for active tab as routerLinkActive is not available. Is there any other way I can achieve the same. Thanks

Upvotes: 1

Views: 9765

Answers (1)

Mahmoud Fawzy
Mahmoud Fawzy

Reputation: 1675

First: you can make sub-menu items active by adding routerLinkActiveOptions: { exact: true } to the child items objects, that would make them active whenever you click on one of them or even the route changed:

items: [
  {
    label: 'View Branches',
    icon: 'pi pi-fw pi-pencil',
    routerLink: ['/pages/settings/branches'],
    routerLinkActiveOptions: { exact: true }
  },
  {
    label: 'Add Branch',
    icon: 'pi pi-fw pi-tags',
    routerLink: ['/pages/settings/branches/add/0'],
    routerLinkActiveOptions: { exact: true }
  }
]

Second: you can make the parent items (the toggling item) active using the work around i figured out, by giving them expanded: true the expanded property would change the state of the parent.

you also can make it dynamic whenever the activated route change by calling a function which returns true or false: 

{
   label: 'General Settings',
   icon: 'pi pi-pw pi-file',
   routerLink: ['/pages/settings/general'],
   expanded: this.checkActiveState('/pages/settings/general')
}

The checkActiveState function checks the current active route using the Angular Router and if it match the given url then it would return True and the parent expanded property would change the parent state to active:

constructor(private router: Router) {}

checkActiveState(givenLink) {
  console.log(this.router.url);
  if (this.router.url.indexOf(givenLink) === -1) {
    return false;
  } else {
    return true;
  }
}

You can also use that work around on the menu items that got no childs items as the expanded: true property would also make them active.

Upvotes: 3

Related Questions