routerLinkActive always set home page link as active even if other page is active – Angular 10

💬 Tech Talks › Category: Angular 10 › routerLinkActive always set home page link as active even if other page is active – Angular 10
0 Vote Up Vote Down
Rehmaanali Staff asked 2 years ago

I am using the angular 10 version I have an issue with the routerLinkActive it is setting the home URL (base URL) to active even if the route is on another page.


<li class="nav-item">
  <a class="nav-link" [routerLink]='[""]' routerLinkActive='active'>Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" [routerLink]='["/contact-us"]' routerLinkActive='active'>Contact Us</a>
</li>

routerLinkActive

Question Tags: ,
1 Answers
0 Vote Up Vote Down
Inaam Husain Staff answered 2 years ago

I believe you need to use [routerLinkActiveOptions] in your template page.


[routerLinkActiveOptions]="{exact:true}"

Set the above [routerLinkActiveOptions] directive to all navigation links, which will add the routerLinkActive class to only those navigation links which match the entire URL.

Signup to Post Answer