What it does
Lets you add a CSS class to an element when the link's route becomes active.
How to use
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:
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:
You can configure RouterLinkActive by passing exact: true
. This will add the classes
only when the url matches the link exactly.
You can assign the RouterLinkActive instance to a template variable and directly check
the isActive
status.
Finally, you can apply the RouterLinkActive directive to an ancestor of a RouterLink.
This will set the active-link class on the div tag if the url is either '/user/jim' or '/user/bob'.
Constructor
Class Details
exported from router/index, defined in router/src/directives/router_link_active.ts