Search code examples
angularangular-routingangular-routerlink

Exclude routerLinkActive styleclass for some routes

I have a page header with 4 main tabs. MY PROFILE tab (/profile) has Action Items child tab available at route /profile/action-items. I also have ACTION ITEMS main tab, which basically redirects user to /profile/action-items. That is the root cause of my problem. When /profile/action-items route is active, both MY PROFILE and ACTION ITEMS tab names are highlighted because of routerLinkActive usage. However, I want only ACTION ITEMS to be highlighted at /profile/action-items

app header

I tried to use [routerLinkActiveOptions]="{exact: true}", but in that case MY PROFILE is not highlighted when we navigate to its subtabs, e.g. /profile/bookmarks

Is there a way to solve the issue?

Solution

  • routerLinkActive has no inherent support for the desired behaviour as far as I know. The solution here would be to instead use ngClass and subscribe to the ActivatedRoute, applying the desired active class depending on the precise route.