How do you read route parameters? | Interview Question

Q: How do you read route parameters?

**Target Audience:** Developers who have set up basic routes and now need data from the URL — assumes you know what a route and a component are. **Difficulty:** Easy to Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every log in sections 5 and 6 was produced by compiling the examples with ngc on Angular 22.2.3 and navigating between URLs with Router.navigateByUrl . Router defaults were read from the 22.2.3 package source. ## 1. Why This Even Matters — A Story First Think of a hotel. Every room has the same furniture: bed, desk, lamp. The **room number** on the door decides whose suitcase is inside. When a guest checks out of room 42 and the next guest is assigned room 43, the hotel does not build a new room. It keeps the furniture and swaps the luggage. An Angular route like /users/:id works the same way. The component is the furniture, and :id is the room number. When you go

The problem

Question presented to candidate: "A user profile page lives at /users/:id, and it has a 'next user' button that navigates to /users/43 from /users/42. After clicking it, the page still shows user 42. Explain the ways to read route parameters in Angular, and what went wrong."

What a strong answer should cover:

Three sources: path parameters (:id), query parameters (?tab=posts) and matrix parameters (;mode=edit), plus static data and resolved data.
ActivatedRoute.snapshot.paramMap is a one-time read; ActivatedRoute.paramMap / queryParamMap are observables that emit on every change.
The router reuses the component when only parameters change, so a snapshot read in the constructor goes stale — the bug in the question.
Component input binding (withComponentInputBinding()): route values arrive as input()s by name and update on every navigation; a missing key is set to undefined.
Parameters are always strings (or null), so convert and validate them; parent parameters are inherited by child routes by default in Angular 22.

Clarifying questions expected:

"Is input binding enabled in this app, or are components reading ActivatedRoute directly?"
"Should the page reset its own state when the id changes, or keep it?"

Code / implementation expected: Yes — one component reading the same parameter three ways, navigated between ids.

routing
params

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who have set up basic routes and now need data from the URL — assumes you know what a route and a component are. Difficulty: Easy to Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every log in sections 5 and 6 was produced by compiling the examples with ngc on Angular 22.2.3 and navigating between URLs with Router.navigateByUrl. Router defaults were read from the 22.2.3 package source.

1. Why This Even Matters — A Story First

Think of a hotel. Every room has the same furniture: bed, desk, lamp. The room number on the door decides whose suitcase is inside. When a guest checks out of room 42 and the next guest is assigned room 43, the hotel does not build a new room. It keeps the furniture and swaps the luggage.

An Angular route like /users/:id works the same way. The component is the furniture, and

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularOne component reading :id via snapshot, paramMap and input binding

import { ApplicationConfig, Component, inject, input, signal } from "@angular/core";
import { toSignal } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Router, RouterOutlet, provideRouter, withComponentInputBinding } from "@angular/router";
import { map } from "rxjs";

let created = 0;

@Component({
  selector: "app-user",
  template: `
    <p>snapshot id: {{ snapshotId }}</p>
    <p>paramMap id: {{ liveId() }}</p>
    <p>input id: {{ id() }} | tab: {{ tab() ?? "none" }} | section: {{ section() }}</p>
  `,
})
export class UserComponent {
  private route = inject(ActivatedRoute);

  // 1. Snapshot: read once. Goes stale if the router reuses this instance.
  snapshotId = this.route.snapshot.paramMap.get("id");

  // 2. Observable: emits every time the :id segment changes.
  liveId = toSignal(this.route.paramMap.pipe(map((p) => p.get("id"))));

  // 3. Component input binding (needs withComponentInputBinding()).
  //    Path params, query params, static data and resolved data all bind by name.
  id = input<string>();
  tab = input<string>();
  section = input<string>();

  constructor() {
    created++;
    console.log(`  UserComponent constructed (#${created}), snapshot id=${this.snapshotId}`);
  }
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      [{ path: "users/:id", component: UserComponent, data: { section: "people" } }],
      withComponentInputBinding(),
    ),
  ],
};

@Component({
  selector: "app-root",
  imports: [RouterOutlet],
  template: `<router-outlet />`,
})
export class AppComponent {
  readonly router = inject(Router);
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.