Lets you add a CSS class to an element when the link's route becomes active.
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
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 }
[routerLinkActive]
routerLinkActive
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(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
exported from @angular/router/index, defined in @angular/router/src/directives/router_link_active.ts
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html