Angular Routing — Navigate Between Pages (Angular 21+)

This lesson covers Angular routing with @angular/router — how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink, read route parameters, and preview lazy-loaded feature modules.

Prerequisites: Lessons 1–3 with a local Angular 21 app (routing enabled at ng new). Estimated time: 45–55 minutes.

1. Why Routing Matters

SPAs load one HTML shell and swap views in place. Angular Router maps URLs like /products/42 to components, updates the browser history, and supports deep links — essential for bookmarks, SEO (with SSR), and back-button behavior.

2. Define Routes in app.routes.ts

Angular 21 standalone apps define routes in src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { About } from './about/about';

export const routes: Routes = [
  { path: '', component: Home, title: 'Home' },
  { path: 'about', component: About, title: 'About' },
  { path: '**', redirectTo: '' },
];

Register routes in app.config.ts with provideRouter(routes) (already present if you chose routing at scaffold time).

3. router-outlet and routerLink

Place the outlet where routed components render:

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

Import RouterLink and RouterLinkActive in your standalone shell component.

4. Route Parameters

// routes
{ path: 'products/:id', component: ProductDetail }

// product-detail.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `<h2>Product {{ id() }}</h2>`,
})
export class ProductDetail {
  id = input.required<string>({ alias: 'id' }); // route param binding (Angular 21+)
}

Alternatively use ActivatedRoute or the inject() API with toSignal(route.paramMap) for async param streams.

5. Lazy Loading (Preview)

{
  path: 'admin',
  loadComponent: () => import('./admin/admin').then(m => m.Admin),
}

Lazy routes download code only when visited — critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com.

6. Next Steps

Continue to Lesson 5 — Services and Dependency Injection to share data and API clients across routed components.

Frequently Asked Questions

What is Angular Router?
The official routing library for Angular that maps URLs to components and manages navigation inside SPAs.

Do I still need NgModules for routing?
No. Angular 21 uses standalone components with provideRouter and loadComponent for lazy loading.