What is `ActivatedRoute`?

ActivatedRoute is an Angular service that provides information about the currently activated route.

It is commonly used to read information from the URL, such as:

Route parameters
Query parameters
URL segments
Route data
Parent and child route information

It is imported from:

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

For example, if the URL is:

/products/10

and the route is:

{ path: 'products/:id', component: ProductDetails }

ActivatedRoute allows ProductDetails to get:

id = 10

A simple way to remember it:

Router          → Navigate TO a route
ActivatedRoute  → Read information FROM the current route

Full Simple Sample Program

Let's create a product details page where the product ID comes from the URL.

`product-list.ts`

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h2>Products</h2>

    <button (click)="viewProduct(10)">
      View Product 10
    </button>

    <button (click)="viewProduct(20)">
      View Product 20
    </button>
  `
})
export class ProductList {

  constructor(private router: Router) {
  }

  viewProduct(id: number): void {
    this.router.navigate(['/products', id]);
  }
}

`product-details.ts`

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

@Component({
  selector: 'app-product-details',
  standalone: true,
  template: `
    <h2>Product Details</h2>

    <p>Product ID: {{ productId }}</p>
  `
})
export class ProductDetails implements OnInit {

  productId: string | null = null;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id');
  }
}

`app.routes.ts`

import { Routes } from '@angular/router';

import { ProductList } from './product-list';
import { ProductDetails } from './product-details';

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

`app.config.ts`

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

`app.ts`

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet
  ],
  template: `
    <h1>My Angular Application</h1>

    <router-outlet></router-outlet>
  `
})
export class App {
}

Explanation

Suppose the user clicks:

View Product 10

This code executes:

this.router.navigate(['/products', 10]);

The browser URL becomes:

/products/10

Angular matches this route:

{
  path: 'products/:id',
  component: ProductDetails
}

Here:

:id
 ↓
10

Inside ProductDetails, we inject ActivatedRoute:

constructor(private route: ActivatedRoute) {
}

Then:

this.route.snapshot.paramMap.get('id');

reads the id parameter.

The complete flow is:

/products/10
      ↓
Angular Router
      ↓
products/:id
      ↓
ProductDetails
      ↓
ActivatedRoute
      ↓
paramMap.get('id')
      ↓
"10"

What is `snapshot`?

In:

this.route.snapshot.paramMap.get('id');

snapshot represents the route information at that particular moment.

For example:

const id = this.route.snapshot.paramMap.get('id');

For:

/products/10

we get:

id = "10"

Notice that the value is returned as a string, not a number.

If you need a number:

const id = Number(
  this.route.snapshot.paramMap.get('id')
);

Using `paramMap` Observable

There is another important way to read parameters:

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

Example:

export class ProductDetails implements OnInit {

  productId: string | null = null;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {

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

  }
}

This is useful when the route parameter can change while Angular reuses the same component instance.

For example:

/products/10
      ↓
/products/20

Using paramMap lets the component react when the parameter changes.

`snapshot` vs `paramMap`

This is an important interview topic.

Snapshot

this.route.snapshot.paramMap.get('id');

Reads the value once from the current route snapshot.

Observable

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

Can react to route parameter changes.

`snapshot`	`paramMap` Observable
Reads current value	Observes changes
Simple	Reactive
Good when parameter won't change during component reuse	Good when parameter may change
No subscription	Observable-based

For example:

/products/10 → /products/20

If Angular keeps the same ProductDetails component instance, subscribing to paramMap ensures the new id is processed.

Reading Query Parameters

ActivatedRoute is not only for route parameters.

Suppose the URL is:

/products?category=laptop&page=2

You can read query parameters using:

this.route.queryParamMap.subscribe(params => {

  const category = params.get('category');
  const page = params.get('page');

  console.log(category);
  console.log(page);

});

Output:

laptop
2

Route Parameter vs Query Parameter

Suppose:

/products/10?tab=reviews

Here:

10          → Route parameter
tab=reviews → Query parameter

Read the route parameter:

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

Read the query parameter:

this.route.queryParamMap.subscribe(params => {
  const tab = params.get('tab');
});

Reading Static Route Data

Routes can also contain custom data:

{
  path: 'products/:id',
  component: ProductDetails,
  data: {
    title: 'Product Details'
  }
}

You can read it using:

this.route.data.subscribe(data => {
  console.log(data['title']);
});

Output:

Product Details

`Router` vs `ActivatedRoute`

This distinction is very important.

`Router`

Used primarily to navigate:

this.router.navigate(['/products', 10]);

Think:

Where do I want to go?

`ActivatedRoute`

Used to inspect information associated with the current route:

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

Think:

What information does my current route contain?

Comparison

`Router`	`ActivatedRoute`
Performs navigation	Provides current route information
`navigate()`	`paramMap`
`navigateByUrl()`	`queryParamMap`
Creates/changes navigation	Reads parameters/data associated with active route

Simple memory trick:

Router
  ↓
GO somewhere


ActivatedRoute
  ↓
KNOW about the current route

Modern Angular Using `inject()`

Instead of:

constructor(private route: ActivatedRoute) {
}

you can use:

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

@Component({
  selector: 'app-product-details',
  standalone: true,
  template: `
    <h2>Product Details</h2>
    <p>Product ID: {{ productId }}</p>
  `
})
export class ProductDetails {

  private route = inject(ActivatedRoute);

  productId = this.route.snapshot.paramMap.get('id');
}

Both approaches are valid.

Key Points

ActivatedRoute provides information about the currently activated route.
Import it from:

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

Inject it using:

constructor(private route: ActivatedRoute) {}

or:

private route = inject(ActivatedRoute);

Read a route parameter once:

this.route.snapshot.paramMap.get('id');

React to route parameter changes:

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

Read query parameters:

this.route.queryParamMap.subscribe(params => {
  const page = params.get('page');
});

Read route data:

this.route.data.subscribe(data => {
  console.log(data);
});

Remember:

Router          → Navigation
ActivatedRoute  → Current route information

Interview Questions and Answers

1. What is `ActivatedRoute`?

ActivatedRoute is an Angular service that provides information about the currently activated route, including route parameters, query parameters, route data, URL segments, and route relationships.

2. How do you read a route parameter?

For this route:

{ path: 'products/:id', component: ProductDetails }

you can use:

const id = this.route.snapshot.paramMap.get('id');

3. How do you react to route parameter changes?

Use the paramMap Observable:

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

4. What is the difference between `snapshot` and `paramMap`?

snapshot reads the route information at one point in time, while the paramMap Observable can emit new values when route parameters change.

5. How do you read query parameters?

this.route.queryParamMap.subscribe(params => {
  const page = params.get('page');
});

6. What is the difference between `Router` and `ActivatedRoute`?

Router is primarily used to perform navigation, while ActivatedRoute provides information associated with the currently active route.

// Navigate
this.router.navigate(['/products', 10]);

// Read current route parameter
this.route.paramMap.subscribe(params => {
  const id = params.get('id');
});

Interview-ready answer

ActivatedRoute is an Angular service that provides information about the currently activated route. It is commonly used to access route parameters, query parameters, route data, and URL information. For example, for /products/10, we can retrieve the id value using ActivatedRoute.paramMap or ActivatedRoute.snapshot.paramMap.

What is ActivatedRoute in Angular?

What is ActivatedRoute?

Full Simple Sample Program

product-list.ts

product-details.ts

app.routes.ts

app.config.ts

app.ts

Explanation

What is snapshot?

Using paramMap Observable

snapshot vs paramMap

Snapshot

Observable

Reading Query Parameters

Route Parameter vs Query Parameter

Reading Static Route Data

Router vs ActivatedRoute

Router

ActivatedRoute

Comparison

Modern Angular Using inject()

Key Points

Interview Questions and Answers

1. What is ActivatedRoute?

2. How do you read a route parameter?

3. How do you react to route parameter changes?

4. What is the difference between snapshot and paramMap?

5. How do you read query parameters?

6. What is the difference between Router and ActivatedRoute?

Interview-ready answer

Keep Learning - More From This Category

What is `ActivatedRoute`?

`product-list.ts`

`product-details.ts`

`app.routes.ts`

`app.config.ts`

`app.ts`

What is `snapshot`?

Using `paramMap` Observable

`snapshot` vs `paramMap`

`Router` vs `ActivatedRoute`

`Router`

`ActivatedRoute`

Modern Angular Using `inject()`

1. What is `ActivatedRoute`?

4. What is the difference between `snapshot` and `paramMap`?

6. What is the difference between `Router` and `ActivatedRoute`?