? Angular Route Parameters

? Quick Overview

In Angular, route parameters let you pass dynamic values (like an id) through the URL so that different components can read and react to them. You can also attach static data to routes, which components can retrieve using the Angular router.

? Key Concepts

• Define parameters in routes using a colon (e.g. product/:id).
• Use ActivatedRoute to read parameters and static data inside a component.
• snapshot.paramMap gives you parameter values at a single point in time.
• paramMap and data observables let you react to changes in the route.
• Static data can be passed using the data property inside route configuration.

? Syntax & Theory

A route with parameters is defined inside the Routes array. Each parameter is prefixed with :. When the URL matches, Angular activates the configured component and makes the parameter value available via the router.

Inside a component, you inject ActivatedRoute to read:

• route.snapshot.paramMap.get('id') for a one-time read of the id parameter.
• route.paramMap observable to respond to parameter changes (e.g. when the same component is reused).
• route.data observable to read static data defined in the route configuration.

? Common Use Cases

• Product pages like /product/101 where 101 is the product ID.
• User profiles like /user/42 where 42 is the user ID.
• Blog details like /posts/angular-routing where the slug is a route parameter.

? Code Examples

1️⃣ Defining a Route with Parameters

This route configuration defines a product/:id path that loads ProductComponent.

// app-routing.module.ts - defining a route with a parameter
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductComponent } from './product/product.component';

const routes: Routes = [
  { path: 'product/:id', component: ProductComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2️⃣ Accessing Route Parameters in a Component

Here we read the id parameter using both snapshot (one-time) and paramMap (reactive) so that the component updates if the parameter changes.

// product.component.ts - reading route parameters
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product',
  template: '<p>Product ID: {{ productId }}</p>'
})
export class ProductComponent implements OnInit {
  productId!: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id')!; // Read once using snapshot

    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id')!; // React when the id changes
    });
  }
}

3️⃣ Passing Static Data via Route

You can also attach static data to a route and then read it inside the component using route.data.

// app-routing.module.ts - adding static data to a route
const routes: Routes = [
  { path: 'product/:id', component: ProductComponent, data: { title: 'Product Details' } }
];

// product.component.ts - reading static data from the route
ngOnInit(): void {
  this.route.data.subscribe(data => {
    console.log(data['title']); // Logs: Product Details
  });
}

? Live Output & Explanation