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 6 months 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: ,

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Answers
0 Vote Up Vote Down
Inaam Husain Staff answered 6 months 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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Signup to Post Answer
    • Enable Notifications    OK No thanks