Route Parameters: Build Dynamic Pages

Dynamic routes let you build pages like:

• /users/10
• /products/42

Step 1: Define a route with a param

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

Step 2: Read param in the component

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

@Component({
  selector: 'app-user-details',
  standalone: true,
  template: `<h2>User ID: {{ userId }}</h2>`,
})
export class UserDetailsComponent {
  userId = '';

  constructor(private route: ActivatedRoute) {
    this.userId = this.route.snapshot.paramMap.get('id') ?? '';
  }
}

Better: subscribe for changes

If user navigates from /users/10 to /users/11 without destroying component:

this.route.paramMap.subscribe(params => {
  this.userId = params.get('id') ?? '';
});

Next: Query parameters like ?tab=posts and ?sort=asc.