Navigating Between Pages with routerLink in Angular

Navigation is one of the most essential parts of any web application. Angular provides a powerful routing mechanism that allows developers to create single-page applications (SPAs) where navigation between views happens without reloading the page. One of the simplest ways to achieve navigation in Angular is through the use of the routerLink directive.

This article provides a comprehensive guide on using routerLink in Angular, covering its basics, advanced usage, and best practices.

Introduction to Angular Routing

Angular is a front-end framework that allows developers to build dynamic single-page applications. Unlike traditional multi-page applications, SPAs load content dynamically without requiring full-page reloads. This behavior improves user experience and makes applications faster and more responsive.

Routing is the mechanism by which Angular decides which view or component to display when the user navigates to a particular URL. The Angular Router module helps developers implement this functionality efficiently.

---

Setting Up Angular Routing

Before using routerLink, you need to set up Angular routing in your application.

1. Create a new Angular project:

ng new angular-routing-demo
cd angular-routing-demo

2. Generate components:

For this example, let’s create Home, About, and Contact components.

ng generate component home
ng generate component about
ng generate component contact

3. Configure routes:

Open app-routing.module.ts and define routes for the components:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---

Understanding routerLink

The routerLink directive is used in Angular templates to navigate between views. It is a declarative way of defining navigation links.

Basic Usage

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>
<router-outlet></router-outlet>

Here, routerLink binds the anchor tag to a route path. When a user clicks on a link, Angular updates the URL and displays the corresponding component inside <router-outlet> without reloading the page.

---

Advantages of routerLink

Using routerLink has several advantages over traditional HTML links:

1. SPA Behavior: Navigation is smooth, and the page does not reload.
2. Maintains State: The application state is preserved during navigation.
3. Active Route Styling: Angular allows styling links based on the active route.
4. Declarative Approach: routerLink is simple and easy to maintain.

---

Using routerLink with Parameters

Often, routes require dynamic parameters. For example, a User component might display details for a specific user based on their ID.

Defining a Route with Parameters

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

Passing Parameters via routerLink

<a [routerLink]="['/user', 1]">User 1</a>
<a [routerLink]="['/user', 2]">User 2</a>

Here, [routerLink] is used with property binding to pass dynamic parameters.

---

Query Parameters and Fragments

Angular routerLink also allows passing query parameters and URL fragments.

Example with Query Parameters

<a [routerLink]="['/about']" [queryParams]="{ ref: 'social' }">About</a>

This generates a URL like /about?ref=social.

Example with Fragment

<a [routerLink]="['/contact']" fragment="section2">Contact Section 2</a>

The URL becomes /contact#section2.

---

Active Route Styling

Angular provides the routerLinkActive directive to apply CSS classes to links that match the current route.

<nav>
  <a routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="/about" routerLinkActive="active-link">About</a>
  <a routerLink="/contact" routerLinkActive="active-link">Contact</a>
</nav>

.active-link {
  font-weight: bold;
  color: blue;
}

• routerLinkActive applies the class when the link’s route is active.
• [routerLinkActiveOptions]="{ exact: true }" ensures the class is applied only if the path matches exactly.

---

Nested Routes with routerLink

Angular supports nested or child routes, allowing complex navigation structures.

Defining Nested Routes

const routes: Routes = [
  { path: 'products', component: ProductsComponent, children: [
{ path: 'electronics', component: ElectronicsComponent },
{ path: 'clothing', component: ClothingComponent },
  ]}
];

Navigating to Nested Routes

<a routerLink="/products/electronics">Electronics</a>
<a routerLink="/products/clothing">Clothing</a>

Nested routes can also use <router-outlet> inside the parent component to render child components.

---

Programmatic Navigation

While routerLink is declarative, Angular also allows navigation programmatically using the Router service.

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

@Component({
  selector: 'app-home',
  template: <button (click)="goToAbout()">Go to About</button>
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
this.router.navigate(['/about']);
  }
}

This is useful when navigation is triggered by a function rather than a link.

---

Lazy Loading and routerLink

For large applications, lazy loading modules improves performance by loading parts of the app only when needed.

Example of Lazy Loading

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

routerLink still works seamlessly with lazy-loaded routes:

<a routerLink="/admin">Admin Panel</a>

---

Common Mistakes with routerLink

1. Forgetting the Leading Slash:
   routerLink="about" navigates relative to the current route. Use routerLink="/about" for absolute navigation.
2. Not Importing RouterModule:
   Always import RouterModule in your module: imports: [RouterModule.forRoot(routes)]
3. Incorrect Parameter Syntax:
   Use [routerLink]="['/path', param]" instead of routerLink="/path/param" for dynamic values.
4. Not Using <router-outlet>:
   Without <router-outlet>, your routed components won’t render.

---

Best Practices for Using routerLink

• Use [routerLink] with property binding for dynamic routes.
• Always define routes in app-routing.module.ts for maintainability.
• Combine routerLinkActive for visual feedback.
• Use child routes for modular and scalable architecture.
• Implement lazy loading for large feature modules.
• Avoid hard-coded URLs; always rely on route configuration.

---

Complete Example

Here’s a complete Angular template demonstrating routerLink usage:

<nav>
  <a routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="/about" routerLinkActive="active-link">About</a>
  <a routerLink="/contact" routerLinkActive="active-link">Contact</a>
  <a [routerLink]="['/user', 1]" routerLinkActive="active-link">User 1</a>
</nav>

<router-outlet></router-outlet>

// app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'user/:id', component: UserComponent },
];

This setup allows smooth, declarative, and maintainable navigation across all views in an Angular application.