RouterLinkActive for RouterLink with parameters (/

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?

Answer 1

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.

Answer 2

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?

Answer 3

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')"

Answer 4

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