Angular Academy · Lesson

Route Parameters and Query Params

Read and react to route parameters.

Lesson 1 of 413 steps

Route Parameters and Query Params is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Angular Academy learning path, including “Route Parameters and Query Params”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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