Angular routerLinkActive class always shows Home Page link as active even if other page is active

When you have already set the routerLinkActive class to all the navigation links of your Angular Application, but it always keeps the Home Page link which has routerLink="/" pointing to Home Page as active and also it shows the style as Active for other pages too when we are visiting them. 

In the above screenshot, you can see that navigation links which is currently active is "Properties", but it also shows "Home" links as active too and it applied the routerLinkActive class to both these navigation links. Refer the following solution to fix this routerLinkActive class getting applied to multiple links issue.

Solution: Open your navigation links template page and add the following [routerLinkActiveOptions] to all of your navigation links.

[routerLinkActiveOptions]="{exact:true}"

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

Following is the example of navigation template which uses [routerLinkActiveOptions]:

<div class="topnav" id="myTopnav">
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
  <a routerLink="/users" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Users</a>
  <a routerLink="/properties" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Properties</a>
  <a routerLink="/about" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">About</a>
</div>
<router-outlet></router-outlet>

Try this above solution to fix your routing navigation links issue when showing active link.