Routing & Navigation
Angular Route Parameters
A route segment prefixed with a colon becomes a parameter. Read it from ActivatedRoute — either as a one-off snapshot, or as an Observable that updates when the parameter changes while the component stays mounted.
What is Route Parameters in Angular?
A route segment prefixed with a colon becomes a parameter. Read it from ActivatedRoute — either as a one-off snapshot, or as an Observable that updates when the parameter changes while the component stays mounted.
Route Parameters example
// one-off read — fine when the component is recreated per id
id = this.route.snapshot.paramMap.get('id');
// reactive — required when navigating between ids reuses the component
job$ = this.route.paramMap.pipe(
map(params => params.get('id')!),
switchMap(id => this.api.getJob(id))
);How this works
Navigating from /jobs/1 to /jobs/2 reuses the same component instance by default, so a snapshot read never updates. The Observable form always reflects the current URL.
Key points to remember
- paramMap for path parameters, queryParamMap for the query string.
- Every parameter is a string — convert explicitly when you need a number.
- withComponentInputBinding() lets route params arrive as @Input values.
Common mistakes with Route Parameters
- Using snapshot in a detail page reachable from a list of siblings — the page shows stale data.
- Subscribing to paramMap without unsubscribing; prefer the async pipe.
Angular Route Parameters— Interview Questions & FAQs
Why does my Angular detail page not update when the id changes?+
You read the parameter from snapshot, which is captured once. Angular reuses the component for the same route, so subscribe to route.paramMap instead.