• Overview
@angular/router

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.

  
    class RouterLinkActive implements OnChanges ,OnDestroy ,AfterContentInit {}

isActive

boolean

routerLinkActiveOptions

IsActiveMatchOptions | { exact: boolean; }

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

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

ariaCurrentWhenActive

boolean | "page" | "step" | "location" | "date" | "time" | undefined

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

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

isActiveChange

EventEmitter<boolean>

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>

ngAfterContentInit

void
@returnsvoid

routerLinkActive

string | string[]

ngOnChanges

void
@paramchangesSimpleChanges
@returnsvoid

ngOnDestroy

void
@returnsvoid
Jump to details