W3cubDocs

/Angular

RouterLinkActive

directive

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

Selectors

Properties

Property Description
links: QueryList<RouterLink>
isActive Read-Only
@Input()routerLinkActiveOptions: { exact: boolean; } | IsActiveMatchOptions

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

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

See also:

  • Router.isActive

@Input()ariaCurrentWhenActive?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false

Aria-current attribute to apply when the router link is active.

Possible values: 'page' | 'step' | 'location' | 'date' | 'time' | true | false.

See also:

@Output()isActiveChange: EventEmitter<boolean> Read-Only

You can use the output isActiveChange to get notified each time the link becomes active or inactive.

Emits: true -> Route is active false -> Route is inactive

<a
 routerLink="/user/bob"
 routerLinkActive="active-link"
 (isActiveChange)="this.onRouterLinkActive($event)">Bob</a>
@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 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>

© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/router/RouterLinkActive