Angular Route Parameters

What Are Route Parameters?

A route parameter is a dynamic segment in a path, marked with a colon (like :id in /users/:id), that captures part of the URL as a named value your component can read. Query parameters (after a ? in the URL) work similarly for optional, non-positional values.

Angular exposes both through the injected ActivatedRoute service, either as an Observable (reacting to changes without recreating the component) or as a one-time snapshot.

{ path: 'users/:id', component: UserDetailComponent }

// user-detail.component.ts
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  userId = this.route.snapshot.paramMap.get('id');
}

Visiting /users/42 sets userId to "42"; route parameters are always strings, convert them explicitly if you need a number.

Reading Parameters

route.snapshot.paramMap.get('id')          // one-time read
route.paramMap.subscribe(params => ...)      // reactive, updates on change
route.snapshot.queryParamMap.get('sort')     // query string value
route.queryParamMap.subscribe(params => ...)  // reactive query params

• paramMap reads path parameters defined with a colon in the route (:id).
• queryParamMap reads query string parameters (?sort=asc), independent of route path structure.
• Snapshot reads are simplest but won't update if the same component instance is reused for a new parameter value.
• Subscribing to the Observable form correctly reacts to parameter changes without recreating the component.

Route Parameters Cheatsheet

Reading dynamic values from the URL in different ways.

Reacting to Parameter Changes

If a user navigates from /users/1 to /users/2 while the same UserDetailComponent instance stays active (a common router optimization), a snapshot read taken once in ngOnInit will not update. Subscribing to paramMap as an Observable correctly reacts to every change.

export class UserDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private userService = inject(UserService);
  user?: User;

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const id = params.get('id')!;
      this.userService.getUser(id).subscribe(user => (this.user = user));
    });
  }
}

Binding Route Parameters Directly to Inputs

Modern Angular can bind route (and query) parameters directly to a routed component's inputs automatically, removing the need to manually read ActivatedRoute for simple cases.

// app.config.ts
provideRouter(routes, withComponentInputBinding())

// user-detail.component.ts
export class UserDetailComponent {
  @Input() id!: string; // automatically bound from the ':id' route parameter
}

withComponentInputBinding() must be enabled once in the router configuration for this to work anywhere in the app.

Working With Query Parameters

Query parameters are ideal for optional state like pagination, sorting, or filters, values that shouldn't be part of the route's structural path but should still be shareable/bookmarkable in the URL.

<!-- template -->
<a [routerLink]="['/products']" [queryParams]="{ sort: 'price', page: 2 }">
  Sorted by Price
</a>

// component
this.router.navigate(['/products'], { queryParams: { sort: 'price' }, queryParamsHandling: 'merge' });

Common Mistakes

• Reading route parameters only once via snapshot when the component can be reused across parameter changes.
• Forgetting that route parameters are always strings, comparing them directly to numbers without conversion.
• Using a route (path) parameter for optional, non-positional filters instead of a query parameter.
• Not enabling withComponentInputBinding() before relying on automatic input binding for route parameters.

Key Takeaways

• Route parameters capture dynamic path segments defined with a colon, like :id.
• Query parameters capture optional key/value pairs from the URL's query string.
• Subscribing to paramMap/queryParamMap reacts correctly to changes on a reused component instance.
• withComponentInputBinding() can bind route/query parameters directly to component inputs, reducing boilerplate.