Angular 4 + PrimeNG Menu - Multiple menu items shown as active

Question

I am using

Angular 4.1.2 and PrimeNG 4.3.0

Issue I have having is with the PanelMenu i.e. p-panelMenu control.

The following is the structure of my Menu

{
    label: 'Demo',
    icon: 'fa-shield',
    items: [{
        label: 'Proposal',
        items: [
            { label: 'New', icon: 'fa-plus', routerLink: ['/proposal/create'], routerLinkActiveOptions: "{exact:true}" },
            { label: 'Open', icon: 'fa-search', routerLink: ['/proposal'] },
        ]
},

The issue I have is that whenever "New" is clicked, both "Open" and "New" get selected.

I have tried to avoid that by putting routerLinkActiveOptions: "{exact:true}" but it seems to not have any effect either.

Any pointers to documentation regarding API for routerLinkActiveOptions will be appreciated as well. Currently, i am unable to understand what properties / values I can set as options using routerLinkActiveOptions

Answer 1

To resolve this issue please make below changes to your menu model:

{
      label: 'Demo',
      icon: 'fa-shield',
      items: [{
        label: 'Proposal',
        items: [
          { label: 'New', icon: 'fa-plus', routerLink: ['/proposal/create'], routerLinkActiveOptions: { exact: true } },
          { label: 'Open', icon: 'fa-search', routerLink: ['/proposal'], routerLinkActiveOptions: { exact: true } },
        ]
      }]
}

For complete example follow: https://stackblitz.com/edit/angular-a27wca