RouterLinkActive

Stable Directive

What it does

Lets you add a CSS class to an element when the link's route becomes active.

How to use

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

Class Overview

class RouterLinkActive implements OnChanges, 
  constructor(router: Router, element: ElementRef, renderer: Renderer, cdr: ChangeDetectorRef)
  
  
  links : QueryList<RouterLink>
  linksWithHrefs : QueryList<RouterLinkWithHref>
  routerLinkActiveOptions : {exact: boolean}
  isActive : boolean
  ngAfterContentInit() : void
  routerLinkActive 
  ngOnChanges(changes: SimpleChanges) : void
  ngOnDestroy() : void
}

Selectors

[routerLinkActive]

Exported as

routerLinkActive

Class Description

The RouterLinkActive directive lets you add a CSS class to an element when the link's route becomes active.

Consider the following example:

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

When the url is either '/user' or '/user/bob', the active-link class will be added to the a tag. If the url changes, the class will be removed.

You can set more than one class, as follows:

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

You can configure RouterLinkActive by passing exact: true. This will add the classes only when the url matches the link exactly.

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

You can assign the RouterLinkActive instance to a template variable and directly check the isActive status.

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

Finally, you can apply the RouterLinkActive directive to an ancestor of a RouterLink.

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/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'.

Constructor

constructor(router: Router, element: ElementRef, renderer: Renderer, cdr: ChangeDetectorRef)

Class Details

links : QueryList<RouterLink>

linksWithHrefs : QueryList<RouterLinkWithHref>

routerLinkActiveOptions : {exact: boolean}

isActive : boolean

ngAfterContentInit() : void

routerLinkActive

ngOnChanges(changes: SimpleChanges) : void

ngOnDestroy() : void

exported from @angular/router/index, defined in @angular/router/src/directives/router_link_active.ts