Having menu show correct route

Post Reply
Posts: 7
Joined: 12 Feb 2017, 23:56

15 Nov 2017, 22:54

Hi there!

The left bar menu of the Avalon theme is not displaying the correct route, for example:

Code: Select all

this.model = [
            { label: 'Dashboard', icon: 'fa fa-fw fa-home', routerLink: ['/dashboard'] },
                label: 'Call Activity', icon: 'fa fa-fw fa-phone',
                items: [
                    { label: 'All Incoming', icon: 'im-icon im-icon-phone-incoming', badge: '0', routerLink: ['/calls/all'] },
                    { label: 'Answered', icon: 'im-icon im-icon-call-in', badge: '0', routerLink: ['/calls/ans'] },
                    { label: 'Missed', icon: 'im-icon im-icon-call-missed', badge: '0', routerLink: ['/calls/miss'] },
If I were to call https://my.domain/calls/ans directly - then ideally the "Call Activity" menu would be expanded and the "Answered" menu item shown as the selected route.

What actually happens is close - the "Call Activity" is NOT expanded, but if you click to expand, the 'Answered' is highlighted (although not styled correctly). So it is aware the active route.

Is this as designed? Or am I missing something?

I have got around this by adding an 'activeIndex' to AppMenuComponent class, and passing it trough to AppSubMenuComponent (making AppSubMenuComponent activeIndex an @Input)

Then in AppMenuComponent's ngOnInit()

Code: Select all

    getMenuIndexForRoute(route: string) {
        for (var i in this.model) {
            for (var n in this.model[i].items) {
                if (this.model[i].items[n].routerLink[0] == route)
                    this.activeIndex = +i


This works - although the 'active' formatting on the submenu is not completely correct.

So if anyone can help with the following questions:

1) Is the default behavior I described as designed - our should the menu be route aware out of the box?

2) Is there better / best practice / recommended solution?

Any help would be gratefully received.



Posts: 18330
Joined: 05 Jan 2009, 00:21
Location: Cybertron

30 Nov 2017, 13:43

Actually, this has been discussed a couple of times in other places. The menu is actually aware of router, the active item gets "active-menuitem-routerlink" style class which highlights it differently than a selected item.

If you open;


Components will be closed but if you open it forms will be highlighted. Issue here is components item has no route, it is just an element to group links so not sure if there is a clean way of implementing what you require. We'll check to see if we can find a solution to your requirement.

Posts: 2
Joined: 22 Feb 2018, 12:24

19 Feb 2019, 22:15

any news about this problem?

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests