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

See more...

Exported from

• RouterModule

Selectors

• [routerLinkActive]

Properties

<a
 routerLink="/user/bob"
 routerLinkActive="active-link"
 (isActiveChange)="this.onRouterLinkActive($event)">Bob</a>

Template variable references

Description

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

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

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

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

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

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

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

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

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

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

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

The RouterLinkActive directive can also be used to set the aria-current attribute to provide an alternative distinction for active elements to visually impaired users.

For example, the following code adds the 'active' class to the Home Page link when it is indeed active and in such case also sets its aria-current attribute to 'page':

<a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home Page</a>