CODEWITHSUNDEEP
angularrouterlinkactive
Jorawar Singh
Jorawar Singh

Reputation: 7621

Why Angular2 routerLinkActive sets active class to multiple links?

I'm trying to implement routerLinkActive to my app but i'm facing the issue that it's sets class active to multiple links. Here's how i'm doing it

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

Here it's how it looks

enter image description here Here it's how it look in dev-tools enter image description here And my address bar

enter image description here

Am i missing something because i'm doing as explained in angular docs.

Upvotes: 55

Views: 61434

Answers (2)

Pierrick Martelli&#232;re
Pierrick Martelli&#232;re

Reputation: 1665

I had to import RouterModule in app.module.ts to make it work. [routerLinkActiveOptions]="{exact: true}" is also needed to focus only the true route. Hope this will help some.

Upvotes: 0

ranakrunal9
ranakrunal9

Reputation: 13558

Try to set [routerLinkActiveOptions]="{exact: true}" to HTML as below :

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

How does it work ?##

RouterLinkActive does chunk the current route and try to match it's parts with the RouterLinks you've provided. With that in mind, route / will be matched anywhere as it's the very parent for all the other routes (like /about, /contact, etc. as it consist of / + route-path). To simplify, it's not a bug, it's sometimes a needed functionality in your application to match multiple routes. To prevent that, you can specify the routerLinkActiveOptions to match exactly the route you're on. That means it's not going to match parent routes but will only try to find the routerLink provided for this exact route.

Upvotes: 160

Related Questions