Inject ActivatedRoute from @angular/router. For a one-time value, read route.snapshot; when the component must update as navigation changes, use the route’s observables, such as paramMap, queryParamMap, or data. A snapshot is point-in-time state, not a live view. Angular’s route-state guide and ActivatedRoute API reference document these options.
What route state does ActivatedRoute expose?
ActivatedRoute represents the route node associated with a component loaded in a router outlet. It exposes that route’s URL segments and parameters, query parameters and fragment, route data, and links to related nodes in the route tree. The API reference lists the available properties.
As an Amazon Associate I earn from qualifying purchases.
Route parameters and query parameters are different scopes. Parameters such as an identifier in a route path belong to a route node; query parameters are available across routes. Use paramMap or params for route parameters, and queryParamMap or queryParams for query parameters. The map APIs let you retrieve values by key and support multiple values for the same parameter. See Angular’s route-state guide.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchChoose a snapshot or an observable
| Need | Use | What to account for |
|---|---|---|
| Read the initial value once | route.snapshot.paramMap or another snapshot property |
Synchronous and simple, but it does not update when the route later changes. |
| Update when route parameters change | route.paramMap or route.params |
Handle observable emissions and manage the subscription lifecycle. |
| Update when query parameters change | route.queryParamMap or route.queryParams |
Query parameters are shared across routes. |
| React to route data or a fragment | route.data or route.fragment |
These are observables; use snapshots if a one-time read is sufficient. |
Angular describes navigation as events over time and a snapshot as the router state at a particular moment. That distinction matters when the router reuses a component while changing its route parameters. In that case, a snapshot read made at initialization will not keep the component’s displayed state current. See Read route state and ActivatedRouteSnapshot.
#1 Best Overall
Read a parameter once
Use a snapshot when the component only needs the value available at the time it is created or initialized:
import {Component, inject} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({/* ... */})
export class UserProfile {
private route = inject(ActivatedRoute);
readonly userId = this.route.snapshot.paramMap.get('id');
}paramMap.get('id') returns the route parameter value for the key id. If later navigation can change that value while this component remains active, use an observable instead.
React to route parameter changes
Subscribe to paramMap when the component should respond as the active route changes:
Recommended Free Tools
import {Component, inject} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({/* ... */})
export class UserProfile {
private route = inject(ActivatedRoute);
constructor() {
this.route.paramMap.subscribe((params) => {
const userId = params.get('id');
// Update component state for the active user.
});
}
}For query-string values, subscribe to queryParamMap or queryParams. For route data and URL fragments, use data and fragment, respectively. These properties are observables on ActivatedRoute; choose the ones matching the state your component needs. The API reference documents them.
Rank #3
Read values from another route node
The injected route corresponds to the component’s own node in the route tree. If the value belongs to an ancestor route, inspect route.parent or walk route.pathFromRoot. For descendant routes, use route.children or route.firstChild. The snapshot has corresponding tree relationships. Be deliberate about which node owns a route parameter: a parent’s route-specific parameter is not the same thing as a query parameter shared across routes. See ActivatedRoute, ActivatedRouteSnapshot, and Angular’s router reference.
Access resolved route data
A resolver can prepare data before a route activates. Its function receives an ActivatedRouteSnapshot and a RouterStateSnapshot; it can obtain an identifier from route.paramMap and use it to resolve the required value. The activated component can then read resolved values from route.data or its snapshot. Angular’s route data resolvers guide shows the resolver pattern.
Reading query-parameter changes and rerunning a resolver are separate behaviors. By default, Angular’s guard and resolver policy is paramsChange, which does not include query-parameter changes. If a resolver must rerun when query parameters change, select a query-aware policy from the options in the RunGuardsAndResolvers API.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Keep URL-backed filters in sync
For sorting, filters, or pagination represented in the query string, observe the query parameters and navigate with the updated value. Angular’s guide demonstrates merging the new value so existing query parameters are retained:
router.navigate([], {
queryParams: {sort},
queryParamsHandling: 'merge'
});The empty commands array applies the query update without adding a new path segment. The merge setting preserves other query values while applying the supplied update. See Read route state.
Quick Recap
Behavior to keep in mind
- Snapshots do not change. Treat them as a read of route state at a particular moment, not as a subscription to future navigation.
- Observable emissions use shallow equality. The
ActivatedRouteAPI notes that its observables emit when current and previous values differ by shallow equality. Mutating a nested resolved-data object without changing the outer value does not, by itself, causedatato emit. See the API reference. - Resolver policy affects refresh timing. A query-parameter update does not trigger a resolver under the default
paramsChangepolicy; use an appropriate query-aware option when that behavior is required.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
