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'] },
...
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.
Thanks.
Phil