Week 10: Routing Fundamentals

1. Route Configuration & the Router Service

You've had provideRouter(routes) in your app.config.ts since Week 3, sitting there unused. This week it earns its place — routes is just an array mapping URL paths to components.

import { Routes } from '@angular/router';
import { DashboardOverview } from './dashboard/overview/overview';
import { ProjectDetail } from './dashboard/project-detail/project-detail';

export const routes: Routes = [
  { path: '', component: DashboardOverview },
  { path: 'projects/:projectId', component: ProjectDetail },
];

And in your template, a single <router-outlet> is where the matched component actually renders:

<app-nav-bar />
<router-outlet />

Navigate to /projects/42 and Angular matches the second route, renders ProjectDetail into that outlet, and makes 42 available as a route parameter — which is exactly what Section 2 covers.

2. Route Parameters, Query Parameters & Fragments

A segment prefixed with : in a path — like :projectId above — is a route parameter. The modern way to read it is to bind it straight to a component input, no injected service required:

import { provideRouter, withComponentInputBinding } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
  ],
};

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

@Component({
  selector: 'app-project-detail',
  templateUrl: './project-detail.html',
})
export class ProjectDetail {
  // Automatically bound from the :projectId route parameter
  projectId = input.required<string>();
}

Query parameters (?sort=name) and the fragment (#reviews) aren't bound this way — they're read from ActivatedRoute directly, since they're optional and don't map to a fixed input the way a required path segment does:

import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';

export class ProductList {
  private route = inject(ActivatedRoute);

  sortBy = toSignal(
    this.route.queryParamMap.pipe(map((params) => params.get('sort') ?? 'name')),
    { initialValue: 'name' }
  );
}

3. Router Outlets & Nested/Child Routes

A route can have children — each with its own path segment, rendered into a <router-outlet> that lives inside the parent route's own component template. This is how a URL like /projects/42/tasks/7 maps to three components nested inside each other.

export const routes: Routes = [
  {
    path: 'projects/:projectId',
    component: ProjectDetail,
    children: [
      { path: '', component: ProjectOverview },
      { path: 'tasks/:taskId', component: TaskDetail },
    ],
  },
];

<h1>Project {{ projectId() }}</h1>
<nav> ...project-level tabs... </nav>

<!-- Child route content renders here -->
<router-outlet />

Notice ProjectDetail needs its own <router-outlet> for its children to render at all — the app's top-level outlet only handles the top-level route match.

4. Programmatic Navigation & routerLink

For links a user clicks, routerLink is simplest — it's like href, but handled by the router instead of triggering a full page reload:

@for (project of projects(); track project.id) {
  <a [routerLink]="['/projects', project.id]">{{ project.name }}</a>
}

For navigation triggered by code — after a form submits, for instance — inject the Router service directly:

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

export class CreateProject {
  private router = inject(Router);

  async onSubmit(newProjectId: string) {
    // ...save the project...
    await this.router.navigate(['/projects', newProjectId]);
  }
}

Both accept relative segments too (['../sibling'], resolved against the current ActivatedRoute) — useful inside deeply nested routes where writing out the full absolute path every time would be brittle.

5. Route Data & Title Strategies

A route can carry static data — useful for things like required permissions, or flags a guard (Week 11) will check — and Angular can set the browser tab title per route automatically, without a component needing to do it manually.

export const routes: Routes = [
  {
    path: 'projects/:projectId',
    component: ProjectDetail,
    title: 'Project Details', // sets document.title on navigation
    data: { requiresRole: 'member' },
  },
];

title can also be a function (a ResolveFn) when the title needs to be dynamic — for example, including the project's actual name once it's loaded, rather than a static string.

6. Handling 404s and Wildcard Routes

A route with path ** matches anything not matched by an earlier route — always place it last in your routes array, since the router matches top to bottom and stops at the first match.

export const routes: Routes = [
  { path: '', component: DashboardOverview },
  { path: 'projects/:projectId', component: ProjectDetail },
  { path: '**', component: NotFound }, // catches everything else
];

7. Hands-on Exercise

8. Knowledge Check

Four quick questions. Expand each to check your answer.