How RouterLink and RouterLinkActive work?

Question

Consider the following example:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

The active-link CSS class will be added to the a tag when the current URL is either "/user" or "/user/bob",

How could I enforce an exact match?

Answer 1

If you want to full match the url. You can add the routerLinkActiveOptions.

e.g.

<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>

Then only when the url is '/user' will add class. The '/user/bob' will not.