RouterLinkActive for RouterLink with parameters (/dynamic)

Question

RouterLinkActive is not working when using a dynamically generated link when navigating through the app itself.

e.g. in my top navigation i have this;

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a>

Whilst the hardcoded version would work.

<a [routerLink]=['user','bob']>View Bobs Account</a>

A plunk for this is here; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

Click on "John" and "Dynamic Router Link Name = " and "John" should both be active. This sometimes work on the first click, if so, then click back to "Home", the click again on "John", you'll see only the hardcoded link is registered as active, even though the hrefs are identical.

Is this designed/impossible? or am i setting something incorrectly?

Did you solve this? Also your punker crashes when you click on the links. — Pylinux, Oct 27 '16 at 07:07

score 29 · Answer 1 · edited Oct 01 '20 at 01:51

29

In your component:

import {Router} from '@angular/router';

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
}

In your HTML:

<a [class.active]="isActive(['user', currentUser.name])">

Router.isActive() documentation on angular.io

edited Oct 01 '20 at 01:51

bwegs

3,769
2
30
33

answered Nov 10 '16 at 12:54

Victor Bredihin

2,220
21
30

5

This should be the accepted answer. At the same time, why doesnt routerLinkActive work like this? – Carlo Roosen Dec 20 '16 at 15:38
2

It appears that router.isActive now requires a second boolean parameter indicating whether the match is exact or not. – Tim Coker Jan 25 '17 at 18:10

score 5 · Answer 2 · answered May 29 '18 at 10:00

5

Accepted answer didn't work for me and I just wanted to highlight top level route matches so I used:

isActive(url): boolean {
    return this.router.url.includes(url);
}

and:

[class.active]="isActive('url')"

answered May 29 '18 at 10:00

Tanya Branagan

551
1
12
21

score 2 · Answer 3 · answered Dec 27 '16 at 23:42

routerLinkActive is evaluated on initial load and only when route is changed. It is no re-evaluated when the link is changed. Hence, dynamically generated link do not work with routerLinkActive. Victor Bredihin's solution above works as the component function is evaluated during rendering.

score 2 · Answer 4 · answered Dec 06 '19 at 13:07

I found that the following work-around also works for my code:

<a [routerLink]=['user', currentUser.name]
   [routerLinkActive]='"active dummyclassname-" + currentUser.name'>
   {{currentUser.name}}
</a>

I.e. tricking Angular in revalidating 'routerLinkActive'.

score 1 · Answer 5 · edited Jan 31 '19 at 18:02

1

Change your html as below :

<a [routerLink]=['user', currentUser.name] 
  routerLinkActive='active'>
    {{currentUser.name}}
</a>

You can also check Why Angular2 routerLinkActive sets active class to multiple links?

edited Jan 31 '19 at 18:02

Pankaj Parkar

134,766
23
234
299

answered Sep 01 '16 at 12:32

ranakrunal9

13,320
3
42
43

routerLinkActive vs [routerLinkActive] doesnt seem to have any impact on the outcome. Also wasn't worried about multiple links being active, that's fine in this case, they should both be active, rather than just one. – ct5845 Sep 01 '16 at 12:43
Actually [routerLinkActive] is not correct way, it will work but throw error some time. – ranakrunal9 Sep 01 '16 at 12:47

Rodolfo Estevam · Answer 6 · 2020-09-17T13:30:50.370

1

You can apply an option for ancestors of linked elements

[routerLinkActiveOptions]="{exact: true}"

edited Sep 17 '20 at 13:30

answered Sep 16 '20 at 17:01

Rodolfo Estevam

51
7

RouterLinkActive for RouterLink with parameters (/dynamic)

6 Answers6

Linked