RouterLink and Active Links

Now that routes are defined, you need a way to navigate between them from the template. Angular provides RouterLink for navigation and RouterLinkActive for styling the currently active link.

RouterLink — replacing href

In a regular website, you use href to link between pages:

<a href="/browse">Browse</a>

In a SPA, href causes a full page reload — defeating the purpose of client-side routing. Use [routerLink] instead:

<a [routerLink]="['/browse']">Browse</a>

RouterLink intercepts the click, calls the Angular router, and updates the URL without reloading the page. It also handles accessibility correctly — the link is a real <a> element, so keyboard navigation and screen readers work as expected.

RouterLink syntax

Pass an array of path segments:

<!-- static routes -->
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/browse']">Browse</a>
<a [routerLink]="['/watchlist']">Watchlist</a>

<!-- routes with parameters -->
<a [routerLink]="['/movies', movie.id]">{{ movie.title }}</a>

The array is joined with /. ['/movies', movie.id] produces /movies/550.

For simple static routes, a string shorthand works:

<a routerLink="/">Home</a>
<a routerLink="/browse">Browse</a>

routerLinkActive — highlighting the active link

routerLinkActive adds a CSS class to an element when the linked route is active (i.e., the current URL matches):

<nav>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="/browse" routerLinkActive="active">Browse</a>
  <a routerLink="/watchlist" routerLinkActive="active">Watchlist</a>
</nav>

When the URL is /browse, Angular adds the active class to the Browse link. You define what active looks like in CSS:

nav a.active {
  color: white;
  border-bottom: 2px solid #e50914;
}

The [routerLinkActiveOptions]="{ exact: true }" on the Home link is important: without it, / would match any URL (since all URLs start with /), and the Home link would always be active.

Importing RouterLink and RouterLinkActive

Both are standalone directives from @angular/router. Import them in any component that uses them:

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

@Component({
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  // ...
})
export class NavBar {}

CinemaVault NavBar

The CinemaVault NavBar uses both directives:

nav-bar.html

<nav class="navbar">
  <a class="brand" routerLink="/">CinemaVault</a>
  <div class="nav-links">
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
    <a routerLink="/browse" routerLinkActive="active">Browse</a>
    <a routerLink="/watchlist" routerLinkActive="active" class="watchlist-link">
      Watchlist
      @if (count > 0) {
        <span class="badge">{{ count }}</span>
      }
    </a>
  </div>
  <form class="search-form" (submit)="onSearch($event)">
    <input [(ngModel)]="searchQuery" placeholder="Search movies..." />
    <button type="submit">Search</button>
  </form>
</nav>

The RouterLink directives handle navigation; RouterLinkActive highlights the current page.

Exercise

1. Add a NavBar component to your practice project.
2. Add three nav links using [routerLink] to routes you have already defined.
3. Add routerLinkActive="active" to each link.
4. Define .active { font-weight: bold; text-decoration: underline; } in the NavBar CSS.
5. Click between links and confirm the active style moves to the current page’s link.

Recap

• Use [routerLink]="['/path']" instead of href for SPA navigation without page reloads.
• Pass path segments as an array: [routerLink]="['/movies', movie.id]" produces /movies/550.
• routerLinkActive="className" adds a CSS class when the linked route is active.
• Use [routerLinkActiveOptions]="{ exact: true }" on the root / link to prevent it from always being active.
• Import RouterLink and RouterLinkActive in any component that uses them.