Active exact router link demo?

Question

The angular router documentation has the following snippet on how to make active router links exact:

The RouterLinkActive directive toggles css classes for active RouterLinks based on the current RouterState. This cascades down through each level of the route tree, so parent and child router links can be active at the same time. To override this behavior, you can bind to the [routerLinkActiveOptions] input binding with the { exact: true } expression. By using { exact: true }, a given RouterLink will only be active if its URL is an exact match to the current URL.

Does anyone have an demo of an exact router link?

do you mean how to use it in html? <a [routerLink]="/inbox" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"> Inbox </a> ? — Max Koretskyi

Max Koretskyi Max Koretskyi · Accepted Answer · 2017-06-13T16:24:50

In the following example the active-link class will be added only when the URL is /inbox, not /inbox/33.

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

Active exact router link demo?

1 Answers