{ "id": "api/router/RouterLinkActive", "title": "RouterLinkActive", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

RouterLinkActivelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Tracks whether the linked route of an element is currently active, and allows you\nto specify one or more CSS classes to add to the element when the linked route\nis active.

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n links: QueryList<RouterLink>\n \n \n \n \n
\n \n linksWithHrefs: QueryList<RouterLinkWithHref>\n \n \n \n \n
\n \n isActive: boolean\n Read-Only\n \n \n \n
\n \n @Input()
routerLinkActiveOptions: {\n exact: boolean;\n} | IsActiveMatchOptions\n 		\n \n

Options to configure how to determine if the router link is active.

\n\n

These options are passed to the Router.isActive() function.

\n\n

See also:

\n
    \n \n

  • Router.isActive

    \n
    • \n
\n \n
\n \n @Input()
routerLinkActive: string | string[]\n 		Write-Only\n \n \n \n
\n
\n\n\n\n \n
\n

Template variable referenceslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IdentifierUsage
routerLinkActive#myTemplateVar=\"routerLinkActive\"
\n
\n\n\n\n \n
\n

Descriptionlink

\n

Use this directive to create a visual distinction for elements associated with an active route.\nFor example, the following code highlights the word \"Bob\" when the router\nactivates the associated route:

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

Whenever the URL is either '/user' or '/user/bob', the \"active-link\" class is\nadded to the anchor tag. If the URL changes, the class is removed.

\n

You can set more than one class using a space-separated string or an array.\nFor example:

\n\n<a routerLink=\"/user/bob\" routerLinkActive=\"class1 class2\">Bob</a>\n<a routerLink=\"/user/bob\" [routerLinkActive]=\"['class1', 'class2']\">Bob</a>\n\n

To add the classes only when the URL matches the link exactly, add the option exact: true:

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

To directly check the isActive status of the link, assign the RouterLinkActive\ninstance to a template variable.\nFor example, the following checks the status without assigning any CSS classes:

\n\n<a routerLink=\"/user/bob\" routerLinkActive #rla=\"routerLinkActive\">\n Bob {{ rla.isActive ? '(already open)' : ''}}\n</a>\n\n

You can apply the RouterLinkActive directive to an ancestor of linked elements.\nFor example, the following sets the active-link class on the <div> parent tag\nwhen the URL is either '/user/jim' or '/user/bob'.

\n\n<div routerLinkActive=\"active-link\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a routerLink=\"/user/jim\">Jim</a>\n <a routerLink=\"/user/bob\">Bob</a>\n</div>\n\n\n \n
\n \n\n \n\n \n\n \n\n \n \n \n\n
\n
\n\n\n" }