Explain Route Parameters and Query Parameters in Angular

43 / 100

Routingbeginner

Route Parameters and Query Parameters

Distinguish route (path) parameters from query parameters and explain how to read each reactively.

Route parameters (:id in a path like /products/:id) and query parameters (?sort=price appended after the path) both carry data through the URL, but they express different intents and interviewers expect you to articulate that distinction clearly: route parameters identify a specific resource as part of the route's structure itself, while query parameters modify or filter the view without changing which resource/route is being addressed.

A route parameter is like a house's street address — it determines which house you're literally standing in front of — while a query parameter is like telling the delivery driver 'leave it on the porch, not with the doorman,' a modifier on how you're handled once you've already arrived at that address.

Key Concepts

Both are accessible through ActivatedRoute, either as a snapshot (route.snapshot.paramMap.get('id'), a one-time read at the moment the component was created) or as an Observable (route.paramMap, route.queryParamMap), and the choice between them is a classic interview gotcha: if the same component instance can be reused for different parameter values (navigating from /products/1 to /products/2 without the component being destroyed and recreated, which Angular does by default for performance), reading only the snapshot means you'll miss the update entirely, since the snapshot was captured once and never refreshes.

ActivatedRouteroute.snapshot.paramMap.get('id')route.paramMaproute.queryParamMap/products/1

This is why subscribing to route.paramMap (or using the async pipe on it in the template) is the generally safer default for any component that might be navigated to itself with different parameters, while snapshot reads are fine for parameters you know will never change without the whole component being destroyed and rebuilt first.

route.paramMapasync

A further nuance worth mentioning: paramMap/queryParamMap return a ParamMap (with .get(), .getAll(), .has()) rather than a plain object, specifically to handle the case where a query parameter can legitimately be repeated (?tag=a&tag=b), which a plain key-value object couldn't represent cleanly.

paramMapqueryParamMapParamMap.get().getAll()