CODEWITHSUNDEEP
angularmenuprimeng
Jagmag
Jagmag

Reputation: 10356

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

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

Upvotes: 4

Views: 9161

Answers (2)

Nilesh Mali
Nilesh Mali

Reputation: 560

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

Upvotes: 8

Ashwani Kumar
Ashwani Kumar

Reputation: 216

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

Upvotes: 0

Related Questions