Lesson 15 / 32

Route Parameters

Read dynamic URL segments such as an item id with route parameters and ActivatedRoute.

A parameterized route

A colon marks a dynamic segment: :id matches any value at that position in the URL.

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

ActivatedRoute exposes the current route's parameters, either as a snapshot or an observable.

export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  productId = this.route.snapshot.paramMap.get('id');
}