Route Parameters

Segments like ":id" capture values from the URL — read them in the matched component via ActivatedRoute.

4 min read Level 2/5 #angular#router#params

What you'll learn

Define dynamic segments in the route path
Read params with ActivatedRoute
Use the paramMap signal in modern style

Dynamic URL segments — users/42, posts/hello-world — are declared with a colon prefix in the path. Read them out of ActivatedRoute.

Declare the segment

export const routes: Routes = [
  { path: 'users/:id', component: UserComponent },
];

Read once (snapshot)

If the component is created fresh for every value, snapshot is fine.

import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-user', standalone: true, template: `<p>User #{{ id }}</p>` })
export class UserComponent {
  private route = inject(ActivatedRoute);
  id = this.route.snapshot.paramMap.get('id');
}

React to changes

When navigating from /users/1 to /users/2, Angular reuses the component. Subscribe to paramMap to see the new value.

this.route.paramMap.subscribe(p => {
  this.id = p.get('id');
});

Signal-friendly read

toSignal lets you treat params as a reactive signal — perfect for computed().

import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';

id = toSignal(this.route.paramMap.pipe(map(p => p.get('id'))));

Now id() returns the latest param value and any computed() that reads it stays in sync.

Query Params & Fragment →