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...

NgModule

• RouterModule

Selectors

• [routerLinkActive]

Properties

Property	Description
links: QueryList<RouterLink>
linksWithHrefs: QueryList<RouterLinkWithHref>
isActive: boolean	Read-Only
@Input()routerLinkActiveOptions: { exact: boolean; }
@Input()routerLinkActive: string | string[]	Write-Only

Template variable references

Identifier	Usage
routerLinkActive	#myTemplateVar="routerLinkActive"

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 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>