Angular 2 routerLinkActive always active for base path

Question

I have this code for my navbar:

<nav>   <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>   <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>   <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a> </nav> 

The problem is the HOME nav point always gets the class because / seems to be always active. Is this avoidable with a small and simple solution?

Thanks for the help

Edit:

this is the solution for now:

[routerLinkActiveOptions]="{ exact: true }"

Answer 1

As suggested by @TomRaine in this answer, you can add the property [routerLinkActiveOptions]="{ exact: true }" to your element:

<nav>   <a [routerLink]="['/']"        [routerLinkActive]="['nav-active']"       [routerLinkActiveOptions]="{ exact: true }">     HOME   </a>   ... </nav>