With `routerLinkActive` the root URL is always active.
See original GitHub issueI’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:
- Created 7 years ago
- Reactions:2
- Comments:14 (3 by maintainers)
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.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?