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

You should use Angular 4 and PrimeNG 4.x or Angular 5 and PrimeNG 5 : https://stackoverflow.com/questions/47630214/primeng-5-0-2-doesnt-work-with-angular-4/47630478#47630478 — Antikhippe, Dec 21 '17 at 19:41
@chautran - no it happens only on clicking "New". When i click "Open", only "Open" gets selected. I feel it is probably because URL for open is a subset of the URL for New - as New is child in the route hierarchy — Jagmag, Dec 22 '17 at 01:01
@Antikhippe - I changed the version to primeng 4.3.0 but that doesnt affect the issue. It still works in same way as before i.e. selecting both items when "new" is selected — Jagmag, Dec 22 '17 at 03:39
@InSane Did you try calling the router.navigate method onClick of the menu? You can use the relativeTo in that case. — Amit, Jan 18 '18 at 09:54

score 8 · Accepted Answer · answered Jan 18 '18 at 04:58

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

score 0 · Answer 2 · answered Jan 13 '18 at 05:00

0

It seems like issue with your route /proposal/create and /proposal/. when you click on New it first invoke proposal and then create that may be the reason of selecting both New and Open

Can you try with totally different routes something like /New and /Open in these case it should work fine.

If this doesn't work then i create a jsfiddle and give it a try :)

answered Jan 13 '18 at 05:00

Ashwani Kumar

216
2
14

thanks for your suggestion but i do not want to have different routes in this case. I would like to have the routes indicate the parent child relationship and would like to know how to make match the URL exactly. – Jagmag Jan 17 '18 at 08:45

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

2 Answers2