URL Params in Angular

A practical example using URL params.

Published: 6/5/2024

Read a route param from the URL.

/posts/:id

Often used with ngOnInit.

id!: number;

constructor(private route: ActivatedRoute) {
  this.route.paramMap.subscribe((paramMap) => {
    if (!paramMap.has('id')) {
      // TODO: Handle error state
      return;
    }
    this.id = Number(paramMap.get('id'));
  });
}
  • constructor(private route: ActivatedRoute) {}