How to Use ActivatedRoute in Angular for Route Parameters

Use Angular's ActivatedRoute service by injecting it into your component constructor to access route parameters and query parameters. You can subscribe to paramMap or queryParamMap observables to react to changes in the route data.

Syntax

Inject ActivatedRoute in your component constructor to access route information. Use paramMap or queryParamMap observables to get parameters.

• activatedRoute.paramMap: Observable for route parameters.
• activatedRoute.queryParamMap: Observable for query parameters.
• Subscribe to these observables to get parameter values.

typescript

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

@Component({
  selector: 'app-example',
  template: '<p>Parameter: {{ param }}</p>'
})
export class ExampleComponent implements OnInit {
  param: string | null = null;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe(params => {
      this.param = params.get('id');
    });
  }
}

Output

<p>Parameter: 123</p>

Example

This example shows how to read a route parameter named id from the URL and display it in the component template.

typescript

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

@Component({
  selector: 'app-user-detail',
  template: '<h2>User ID: {{ userId }}</h2>'
})
export class UserDetailComponent implements OnInit {
  userId: string | null = null;

  constructor(private route: ActivatedRoute) {}

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

Output

<h2>User ID: 42</h2>

Common Pitfalls

• Not subscribing to paramMap or queryParamMap and trying to access parameters synchronously.
• Using snapshot only when parameters can change without recreating the component.
• Forgetting to unsubscribe in complex cases (though Angular handles this for route observables).

Always use subscription to react to parameter changes dynamically.

typescript

/* Wrong way: Using snapshot only (does not update if params change while component is active) */
this.userId = this.route.snapshot.paramMap.get('id');

/* Right way: Subscribe to paramMap to get updates */
this.route.paramMap.subscribe(params => {
  this.userId = params.get('id');
});

Quick Reference

Here is a quick summary of common ActivatedRoute properties and methods:

Property/Method	Description
paramMap	Observable of route parameters as a map
queryParamMap	Observable of query parameters as a map
snapshot.paramMap	Static snapshot of route parameters (no updates)
snapshot.queryParamMap	Static snapshot of query parameters
parent	Access parent route's ActivatedRoute
firstChild	Access first child route's ActivatedRoute

Key Takeaways

Inject ActivatedRoute in your component to access route parameters.

Subscribe to paramMap or queryParamMap to get dynamic updates.

Avoid using snapshot if route parameters can change without recreating the component.

Use paramMap.get('paramName') to read specific parameters.

ActivatedRoute observables auto-unsubscribe on component destroy.