31. ParamMap Observable in Angular

In Angular, the paramMap is part of the ActivatedRoute and provides access to the route parameters. It’s an observable, meaning it emits the parameter values and can reactively update when the parameters change.

Why We Use paramMap Observable?

When you use route.snapshot.paramMap.get('id'), you get the initial value of the parameter when the component is loaded. However, if the route parameters change (e.g., changing the ID in the URL), using snapshot will not update the value. To handle dynamic changes in route parameters, you should use the paramMap observable.

Example: Using paramMap Observable

1. Without paramMap Observable (Initial Value Only)

Using snapshot.paramMap fetches the route parameters only once when the component is initialized, and does not update if the parameters change.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
})
export class EmployeeComponent implements OnInit {
  id: string | null = '';
 
  constructor(private route: ActivatedRoute) {}
 
  ngOnInit(): void {
    // Fetching the parameter only once when the component is initialized
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

In this example, the id value is set when the component is initialized, but if the id in the route changes, it won’t update the value of id.

2. Using paramMap Observable (Handles Parameter Changes Dynamically)

By subscribing to paramMap, the parameter value updates reactively whenever the route parameter changes. This is helpful when the route changes dynamically but the component doesn’t get reloaded.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
 
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
})
export class EmployeeComponent implements OnInit {
  id: string | null = '';
 
  constructor(private route: ActivatedRoute) {}
 
  ngOnInit(): void {
    // Subscribe to paramMap to get the latest value when the route changes
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      console.log('Current ID:', this.id); // Logs the current ID every time it changes
    });
  }
}

Key Points:

• paramMap is an observable provided by the ActivatedRoute service. It emits the route parameters whenever they change.
• snapshot.paramMap is used to get the parameters once when the component is initialized. It doesn’t update if the route changes after the initial load.
• By using this.route.paramMap.subscribe(), the route parameters can be reactively updated whenever they change, without needing to reload the component.

Where to Use:

• Use paramMap observable when you want to react to route parameter changes dynamically, such as when navigating between different items (like id values) within the same component without reloading it.
• snapshot.paramMap should be used when you are certain the parameter won’t change during the lifecycle of the component or when the component is first initialized.

Example Scenario:

Imagine you’re on a product detail page, and the URL looks like this: /products/:id. If you want to display the product based on the id in the URL, you can use the paramMap observable to fetch the new id whenever it changes, without reloading the entire component.

Example URL Changes:

• /products/1 → ID is 1
• /products/2 → ID is 2

By subscribing to paramMap, the component can update the displayed product based on the new id, without needing to reload or reinitialize the entire component.

---

Summary:

• snapshot.paramMap: Fetches parameter values only once when the component is initialized. It won’t update if the route changes.
• paramMap Observable: Subscribes to the route parameters and updates dynamically if the route parameters change during the component’s lifecycle.