Exclude routerLinkActive styleclass for some routes

Question

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

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

Is there a way to solve the issue?

Answer 1

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.