Angular Academy · Lesson

Route Parameters and Query Params

Read and react to route parameters.

Route Parameters and Query Params is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Route params vs query params

Route params are part of the path (/user/42). Query params are appended after ? (/search?q=ng&page=2). The router gives you reactive access to both.

Defining a route param

Use a colon in the path to declare a parameter.

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

Reading params with paramMap

ActivatedRoute.paramMap is an observable that emits whenever the route params change. Use .get() to read a value.

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

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Why observe params

Navigating from /user/1 to /user/2 may reuse the component. The constructor runs once, but paramMap emits again — so subscribe to react to the change.

Snapshot for one-time reads

If the component is never reused for a different param, you can read the snapshot synchronously.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Query params with queryParamMap

queryParamMap exposes query string values, also as an observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Navigating with query params

Use the queryParams option in router.navigate or the routerLink directive.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Preserving query params

queryParamsHandling: 'merge' keeps existing params while updating some; 'preserve' carries them across navigation.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Component input binding (modern)

With withComponentInputBinding(), route and query params can be bound directly to component @Input() (or input signals), skipping ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll for repeated params

Use getAll() when a query key can appear multiple times, e.g. ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Combining params with data loading

A common pattern: map the param into an HTTP call with switchMap so changing the id refetches.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Quick Check

Test your understanding of route parameters.

Recap: Route & Query Params

The router exposes params reactively.

paramMap: path params, observe for reuse.
queryParamMap: query string, with getAll for repeats.
snapshot for one-time reads.
withComponentInputBinding() binds params to inputs.

Next: resolvers and route data.

Frequently asked questions

Is the “Route Parameters and Query Params” lesson free?

Yes — the full text of “Route Parameters and Query Params” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Route Parameters and Query Params”?

Read and react to route parameters. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Route Parameters and Query Params” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy