Exact URL Matching in Angular
The routerLinkActive attribute actually checks the URL not for an exact match, but for a partial match. Let's say our links look like this:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
>
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
>
Bbbb
</a>
</nav>
In this case, if we are at the url /blog/page/ both links will be styled.
You can force the check of link addresses for exact matches using the routerLinkActiveOptions attribute. See how to use it:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
</nav>
Check that links are not set to exact matches by default.
Make links check for exact matches.
