1

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?

Nikita Marinosyan
  • 747
  • 2
  • 8
  • 26

1 Answers1

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.

Will Alexander
  • 3,425
  • 1
  • 10
  • 17
  • It seems like you are right. It worked for me. However, I have found the desired feature in Angular's backlog https://github.com/angular/angular/issues/13205 (not implemented yet) – Nikita Marinosyan Feb 21 '19 at 12:08
  • 1
    I guess you could always replace `{exact: true}` with `{exact: testResult}` and have `testResult` react to the `ActivatedRoute` if you really want to keep to a `routerLinkActive` scheme. – Will Alexander Feb 21 '19 at 12:13