RouterLinkActiveOptions – Allow activating a link on multiple routes

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Currently routerLink can be active only on the currently specified route

Expected behavior

It would be nice to have an option where we can provide lets say a regex or an array of routes on which we want to make the link active.

It would be useful in the cases where a component is loaded on different routes. For example, in my case, I have a route /dashboard that gets loaded at / for the logged in users and for non logged in users we load the landing page at /. Now in the sidebar on dashboard, I have the router link that looks like below.

<a routerLink="/" [routerLinkOptions]="{exact: true}">Dashboard</a>

It gets activated when the user lands on dashboard through / but won’t work when user lands on /dashboard. Currently, I have a custom matcher written that activates the link for me but It would be nice if I could so something like below

<a routerLink="/" [routerLinkOptions]="{match:['/', '/dashboard']}">Dashboard</a>

[cedricmasson]

I had the same kind of problem, that I solved using RouterLinkActive directive on an ancestor, containing <a> tags, with some hidden by css. Not very elegant from the html side, but it avoid me to add any ts code.

In the following example, I got the router-link-active class on my parent div, on theses routes: /inbox/my-tasks, /inbox/all-tasks, /inbox/any-other-link. Here I chose to display only the my-task link.

<div [routerLinkActive]="['router-link-active']">
   <a [routerLink]="['/inbox/my-tasks']">My tasks</a>
   <a [routerLink]="['/inbox/all-tasks']" style="display: none"></a>
   <a [routerLink]="['/inbox/any-other-link']" style="display: none"></a>
</div>

[sandangel]

hi @kamranahmedse , I have built a directive base on your feature request in my angular utils package. I often look into the feature request of angular and try to implement those that does not have to change angular itself and modularize them into NgModule like this: RouterLinkActiveMatchModule. Please take a look and if it seem ok with you, I will publish it so that you can install and use them in your project.

Usage:

<a [routerLinkActiveMatch]="{ 'test-class': 'regexp-in-string-match-url' }"></a>

if you or the angular team could suggest a better name, I would very happy to accept it.