`routerLinkActive`

Adds CSS classes to a routerLink when its route is active.

Since Angular 2+ Spec ↗

Syntax

routerLinkActive="class" [routerLinkActiveOptions]="{ exact }"

Parameters

Name	Type	Required	Description
`classes`	`string \| string[]`	No	Classes applied while the linked route is active.

Returns

directive — Toggles classes based on route activation.

Examples

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  template: `
    <a routerLink="/"
       routerLinkActive="active"
       [routerLinkActiveOptions]="{ exact: true }">Home</a>
    <a routerLink="/users" routerLinkActive="active">Users</a>
  `,
})
export class NavComponent {}

Notes

Apply on the same element as routerLink or an ancestor. Use `[routerLinkActiveOptions]="{ exact: true }"` so a root link is not marked active for child routes. Can also export the directive to read isActive in the template.