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
}

Need a 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
  }
}

Need a 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
  }
}

Need a 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');
  }
}

Need a hint?

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