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?

Answer 1

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

Answer 2

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