With routerLinkActive the root URL is always active.

[marian2js]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
When routerLinkActive is used with the root URL, the active class is always added, since all the URLs are on the tree of the root URL.

Expected/desired behavior
I believe that routerLinkActive should only add the active class to the root URL when we are there, and not on any sub URL, otherwise it seems useless, since it will always evaluate as true.

Reproduction of the problem
Here is a Plunker with the issue: http://embed.plnkr.co/nHasN0pr4j2E5yUermiy/
Click on Test Tab and you will see both tabs active.

What is the expected behavior?
Only Test Tab should be active.

What is the motivation / use case for changing the behavior?
I have a set of tabs: Home, Section 1, Section 2, ..., Section N.
When you are in any section different from Home, I expect this tab not be active.

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: all
• Language: all

I'm not sure if this is an issue or the expected behavior, but I believe it will be better to add an exception for the root URL, and only mark it as active when we are there.
Please let me know if you agree on this change, and I will submit a PR.

Thanks.

[brandonroberts]

This is by design. The routerLinkActive directive marks a routerLink as active if contained in the UrlTree. Since the root is always contained, you need to use the [routerLinkActiveOptions]="{ exact: true }" which will only mark it as active if the current url is an exact match to the routerLink url.

[marian2js]

@brandonroberts Many thanks, I didn't know about the exact option, it solves the issue perfectly.
I'll close this issue.

[crisz]

Sorry for commenting a closed issue. Setting "exact: true" involves a problem: whether you have query params in your URL, it won't recognize that route as active.
So if you have a navbar and a URL with query params, the aforesaid class won't be applied to any of the items.
Is this the expected behavior?

[pptyasar]

@brandonroberts what about @crisz comment?

[brandonroberts]

@pptyasar yes, this is expected behavior. Query params are optional, so they are not considered when checking the path for the active route.

[LorienOlive]

So, how can I include the queryParams when checking to see if the route is active?

[ryanovas]

Perhaps I'm missing a key part of the logic behind this design, but it seems to me that using query params shouldn't prevent a link from being marked as active. I'm also coming short on why it makes sense to have to specify that I don't want the homepage to be marked as active all the time. What is the use case for having 2 links marked as active that makes this the default behaviour?

[ricrps]

@LorienOlive , put [routerLinkActiveOptions]="{ exact: true }" only in the link to the root

[zelwyn]

Thanks @brandonroberts works for me!

[LorienOlive]

Not on this project at the moment, but this is good to know! Thank you very much for the help/response!

…

On Sun, Aug 12, 2018 at 1:20 PM, zelwyn ***@***.***> wrote: Thanks @brandonroberts <https://github.com/brandonroberts> works for me! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9885 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aaa8Rv3XaSSuHuG3-_3XgnF3rQnUc-gGks5uQGPqgaJpZM4JHfrb> .

[darwinguz]

thanks so much @brandonroberts this really works:
[routerLinkActiveOptions]="{ exact: true }"

[emilio-martinez]

I know this issue is old and closed, but just faced this and I have to say: this is weird. Especially if you fin yourself only having to apply it to the root route 🤔

[roelvdboom]

I know this issue is quite old but I think still some people take a look at this issue. A solution would be to reroute your root to /index or '/home' and then the root won't always be active.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}