How to Use routerLink in Angular for Navigation

In Angular, use the routerLink directive on an HTML element to navigate between routes declaratively. It binds a route path to the element, so clicking it changes the view without reloading the page. For example, <a routerLink='/home'>Home</a> navigates to the '/home' route.

Syntax

The routerLink directive is used in templates to link to routes. It can be set as a string or an array of path segments.

• String syntax: routerLink='/path' navigates to the specified route.
• Array syntax: [routerLink]=['/path', 'child'] builds a route from segments.
• Active styling: Use routerLinkActive to add CSS classes when the link is active.

html

<a routerLink='/home'>Go to Home</a>

<a [routerLink]="['/products', productId]">Product Details</a>

<a routerLink='/about' routerLinkActive='active-link'>About Us</a>

Output

Three links: 'Go to Home', 'Product Details', and 'About Us'. Clicking navigates to respective routes without page reload.

Example

This example shows a simple Angular component with navigation links using routerLink. Clicking links changes the displayed component without reloading the page.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink='/home' routerLinkActive='active'>Home</a> |
      <a routerLink='/about' routerLinkActive='active'>About</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: [
    `a.active { font-weight: bold; color: blue; }`
  ]
})
export class AppComponent {}

Output

A navigation bar with 'Home' and 'About' links. Clicking them updates the view below without page reload. The active link is styled bold and blue.

Common Pitfalls

• Forgetting to import RouterModule in your Angular module causes routerLink to not work.
• Using href instead of routerLink reloads the page instead of navigating smoothly.
• Not wrapping routerLink value in brackets when using an array causes errors.
• Missing router-outlet in template means routed components won't display.

html

<!-- Wrong: reloads page -->
<a href='/home'>Home</a>

<!-- Wrong: array without brackets -->
<a routerLink='/home', 'details'>Details</a>

<!-- Right: -->
<a [routerLink]="['/home', 'details']">Details</a>

Output

The first link reloads the page. The second causes an error. The third navigates correctly without reload.

Quick Reference

Use this quick guide to remember routerLink usage:

Feature	Usage	Notes
Basic link	Link	Navigate to '/path' route
Dynamic segments	Item	Build route with parameters
Active class	Home	Adds 'active' class when route is active
Router outlet		Place in template to display routed components
Module import	import { RouterModule } from '@angular/router';	Required in app module

Key Takeaways

Use routerLink on elements to navigate routes without page reload.

Wrap route paths in brackets when passing arrays for dynamic segments.

Always include router-outlet in your template to display routed views.

Import RouterModule in your Angular module to enable routing directives.

Avoid using href for internal navigation to keep SPA behavior.