RouterLink for navigation in Angular

Introduction

RouterLink helps you move between pages in an Angular app without reloading the whole page. It makes navigation smooth and fast.

When you want to link to another page or view inside your Angular app.

When you want to create a menu or navigation bar with clickable links.

When you want to change the URL and show different content without refreshing the browser.

When you want to highlight the active link based on the current page.

When you want to pass parameters in the URL to show specific data.

Syntax

Angular

<a [routerLink]="['/path']">Link Text</a>

Use square brackets [] to bind the routerLink directive to an array or string.

The path inside routerLink is the route path defined in your Angular routing module.

Examples

Link to the 'home' route.

Angular

<a [routerLink]="['/home']">Home</a>

Link to a product details page with a dynamic productId parameter.

Angular

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

Shortcut syntax for linking to the 'about' route without binding.

Angular

<a routerLink="/about">About Us</a>

Sample Program

This component shows a simple navigation bar with three links. Clicking a link changes the page without reloading. Each link has an ARIA label for accessibility.

Angular

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

@Component({
  selector: 'app-navigation',
  standalone: true,
  template: `
    <nav>
      <a [routerLink]="['/home']" aria-label="Go to Home page">Home</a> |
      <a [routerLink]="['/about']" aria-label="Go to About page">About</a> |
      <a [routerLink]="['/contact']" aria-label="Go to Contact page">Contact</a>
    </nav>
  `
})
export class NavigationComponent {}

Important Notes

RouterLink works only inside Angular apps with routing configured.

Use aria-label to help screen readers understand the link purpose.

RouterLink updates the URL and page content without full page reload, improving user experience.

Summary

RouterLink creates clickable links for navigation inside Angular apps.

It changes the URL and page content smoothly without reloading.

Use it with square brackets to bind dynamic paths or without for simple static links.