The NSRouterLinkActive directive lets you add a CSS class to an element when the link"s route becomes active.
Consider the following example:
<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link">Bob</a>
When the url is either "/user" or "/user/bob", the active-link class will be added to the component. If the url changes, the class will be removed.
You can set more than one class, as follows:
<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="class1 class2">Bob</a> <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="["class1", "class2"]">Bob</a>
You can configure NSRouterLinkActive by passing exact: true. This will add the classes only when the url matches the link exactly.
exact: true
<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: true}">Bob</a>
Finally, you can apply the NSRouterLinkActive directive to an ancestor of a RouterLink.
<div [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: true}"> <a [nsRouterLink]="/user/jim">Jim</a> <a [nsRouterLink]="/user/bob">Bob</a> </div>
This will set the active-link class on the div tag if the url is either "/user/jim" or "/user/bob".
The NSRouterLinkActive directive lets you add a CSS class to an element when the link"s route becomes active.
Consider the following example:
<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link">Bob</a>When the url is either "/user" or "/user/bob", the active-link class will be added to the component. If the url changes, the class will be removed.
You can set more than one class, as follows:
<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="class1 class2">Bob</a> <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="["class1", "class2"]">Bob</a>You can configure NSRouterLinkActive by passing
exact: true. This will add the classes only when the url matches the link exactly.<a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: true}">Bob</a>Finally, you can apply the NSRouterLinkActive directive to an ancestor of a RouterLink.
<div [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: true}"> <a [nsRouterLink]="/user/jim">Jim</a> <a [nsRouterLink]="/user/bob">Bob</a> </div>This will set the active-link class on the div tag if the url is either "/user/jim" or "/user/bob".