question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

With `routerLinkActive` the root URL is always active.

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

118reactions
brandonrobertscommented, Jul 8, 2016

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.

5reactions
criszcommented, Aug 10, 2017

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 routerLinkActive always active for base path
The problem is the HOME nav point always gets the class because / seems to be always active. Is this avoidable with a...
Read more >
routerLinkActive always set home page link as active even if ...
I am using the angular 10 version I have an issue with the routerLinkActive it is setting the home URL (base URL) to...
Read more >
RouterLinkActive - Angular
Tracks whether the linked route of an element is currently active, and allows you to specify one or more CSS classes to add...
Read more >
Styling Active Router Link in Angular - GeeksforGeeks
Here we have created the “active” class in CSS file. Provide the { exact : true } to the root route to avoid...
Read more >
/ route has always .router-link-active class - Laracasts
Hi guys, I've got a little problem with Vue router. When I go to any route, root route /, is always marked as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found