Route parameters with ActivatedRoute in Angular - Mini Project: Build & Apply

Route parameters with ActivatedRoute

📖 Scenario: You are building a simple Angular app that shows details of a product based on the product ID in the URL.When a user navigates to /product/42, the app should read the 42 from the URL and display it on the page.

🎯 Goal: Build an Angular standalone component that uses ActivatedRoute to read the id parameter from the route and display it in the template.

📋 What You'll Learn

Create a standalone Angular component named ProductDetailComponent.

Inject ActivatedRoute to access route parameters.

Read the id parameter from the route using ActivatedRoute.

Display the id value in the component template.

Use Angular's new control flow directive @if to conditionally show the ID.

💡 Why This Matters

🌍 Real World

Reading route parameters is essential for apps that show details based on URLs, like product pages or user profiles.

💼 Career

Understanding ActivatedRoute and route parameters is a key skill for Angular developers working on dynamic, URL-driven applications.

1

Create the ProductDetailComponent with basic template

Create a standalone Angular component named ProductDetailComponent with a template that contains a <h2> heading saying Product Details.

Angular

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

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    Product Details
    
  `
})
export class ProductDetailComponent {
  // Your code here
}

Hint

Use @Component decorator with standalone: true and a simple template.

2

Inject ActivatedRoute and create a variable for route parameters

Import ActivatedRoute from @angular/router and inject it in the constructor of ProductDetailComponent as a private variable named route. Also, create a public variable productId of type string | null initialized to null.

Angular

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

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    Product Details
    
  `
})
export class ProductDetailComponent {
  productId: string | null = null;

  constructor(private route: ActivatedRoute) {
    // Your code here
  }
}

Hint

Remember to import ActivatedRoute and inject it in the constructor.

3

Read the 'id' parameter from ActivatedRoute in the constructor

Inside the constructor, assign the id parameter from this.route.snapshot.paramMap.get('id') to the productId variable.

Angular

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

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    Product Details
    
  `
})
export class ProductDetailComponent {
  productId: string | null = null;

  constructor(private route: ActivatedRoute) {
    // Your code here
  }
}

Hint

Use this.route.snapshot.paramMap.get('id') to get the route parameter.

4

Display the productId in the template using @if directive

Update the component template to use Angular's @if directive to show a paragraph <p> with the text Product ID: {{ productId }} only if productId is not null.

Angular

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

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    Product Details
    
  `
})
export class ProductDetailComponent {
  productId: string | null = null;

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

Hint

Use Angular's *ngIf directive to conditionally show the product ID.

Practice

1. What is the primary purpose of ActivatedRoute in Angular?

easy

A. To create new routes dynamically at runtime

B. To access route parameters and query parameters inside a component

C. To navigate programmatically between routes

D. To define routes in the Angular application

Solution

1. Step 1: Understand the role of ActivatedRoute

   ActivatedRoute is used inside a component to access information about the current route, including parameters.

2. Step 2: Differentiate from other routing services

   Defining routes is done in RouterModule, navigation uses Router service, not ActivatedRoute.

3. Final Answer:

   To access route parameters and query parameters inside a component -> Option B

4. Quick Check:

   ActivatedRoute = access route info [OK]

Hint: ActivatedRoute reads URL info inside components [OK]

Common Mistakes:

• Confusing ActivatedRoute with Router for navigation
• Thinking ActivatedRoute defines routes
• Using ActivatedRoute to create routes dynamically

2. Which of the following is the correct way to subscribe to route parameters using ActivatedRoute?

easy

A. this.route.param.subscribe(params => { const id = params['id']; });

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

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

D. this.route.getParam('id').subscribe(id => { });

Solution

1. Step 1: Identify correct ActivatedRoute property

   The correct property to get parameters as an observable is paramMap, not params or others.

2. Step 2: Use the correct method to get parameter

   From paramMap, use get('id') to retrieve the parameter value.

3. Final Answer:

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

4. Quick Check:

   paramMap + get() = correct subscription [OK]

Hint: Use paramMap.subscribe and get('paramName') [OK]

Common Mistakes:

• Using this.route.params.get instead of paramMap
• Trying to subscribe directly on params.get()
• Using non-existent getParam method

3. Given this code snippet inside a component:

constructor(private route: ActivatedRoute) { }

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

If the URL is /profile/42 and the route is defined as { path: 'profile/:userId' }, what will be the value of this.userId after initialization?

medium

A. '42'

B. 42 (number)

C. null

D. undefined

Solution

1. Step 1: Understand paramMap.get returns string

   The paramMap.get() method always returns a string or null if not found.

2. Step 2: Check route and URL match

   The route profile/:userId matches URL /profile/42, so userId is '42'.

3. Final Answer:

   '42' -> Option A

4. Quick Check:

   paramMap.get returns string '42' [OK]

Hint: paramMap.get returns string, not number [OK]

Common Mistakes:

• Assuming paramMap.get returns number type
• Expecting undefined if parameter exists
• Confusing paramMap with params object

4. Consider this code inside a component:

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

But the URL is /product with no id parameter. What issue will occur?

medium

A. this.id will be null, no error occurs

B. Runtime error because 'id' parameter is missing

C. Subscription will not trigger at all

D. this.id will be undefined and cause template error

Solution

1. Step 1: Understand paramMap.get behavior when param missing

   If the parameter does not exist, paramMap.get() returns null, not an error.

2. Step 2: Check subscription behavior

   The subscription still triggers with the current paramMap, so this.id becomes null.

3. Final Answer:

   this.id will be null, no error occurs -> Option A

4. Quick Check:

   Missing param returns null, no error [OK]

Hint: Missing param returns null, not error [OK]

Common Mistakes:

• Expecting runtime error if param missing
• Thinking subscription won't trigger
• Confusing undefined with null

5. You want to create a component that updates its displayed data whenever the route parameter postId changes without recreating the component. Which approach correctly handles this using ActivatedRoute?

hard

A. Read postId once in the constructor and store it

B. Reload the entire component manually on route change

C. Use snapshot.paramMap.get('postId') only in ngOnInit

D. Subscribe to paramMap in ngOnInit and update data inside the subscription callback

Solution

1. Step 1: Understand component reuse on route param change

   Angular reuses the component instance when only route parameters change, so ngOnInit runs once.

2. Step 2: Use paramMap subscription to detect param changes

   Subscribing to paramMap lets you react to parameter changes dynamically without recreating the component.

3. Step 3: Why snapshot is insufficient

   snapshot.paramMap reads parameters only once and won't update if params change while component is active.

4. Final Answer:

   Subscribe to paramMap in ngOnInit and update data inside the subscription callback -> Option D

5. Quick Check:

   Subscribe paramMap for dynamic param changes [OK]

Hint: Subscribe to paramMap to handle param changes live [OK]

Common Mistakes:

• Using snapshot only and missing param updates
• Reading param once in constructor
• Manually reloading component instead of subscribing