Routing

A real app has more than one screen. Angular's router maps a URL path to a component, so navigating around the app doesn't mean reloading the whole page.

Defining routes

TS app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

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

Each entry in the array pairs a URL path with the component that should render when the browser is at that path. The empty string '' matches the app's root URL.

A place for the routed content to appear

HTML app.component.html

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

Behavior

Clicking "About" updates the URL to /about and swaps
HomeComponent for AboutComponent inside <router-outlet>
— the <nav> itself never re-renders.

<router-outlet> marks the spot where the router inserts whichever component matches the current URL. routerLink looks like a normal link but is handled entirely by Angular's router, without triggering a full page reload.

Reading a route parameter

TS app.routes.ts — with a parameter

{ path: 'products/:id', component: ProductDetailComponent }

TS product-detail.component.ts

import { ActivatedRoute } from '@angular/router';

export class ProductDetailComponent {
  productId: string | null;

  constructor(route: ActivatedRoute) {
    this.productId = route.snapshot.paramMap.get('id');
  }
}

Visiting /products/42 matches this route and makes '42' available through ActivatedRoute — the mechanism every product, user, or article detail page in a real app relies on to know which specific item to load.

Note: use routerLink, not a plain href, for in-app navigation. A regular href makes the browser do a full page reload — reloading the whole Angular application from scratch — while routerLink lets the router swap components in place, which is both faster and preserves any state that isn't tied to the URL.

PreviousServices & Dependency Injection NextForms