How to Pass Parameters to Angular Routes (With Examples)

If you enjoy learning through fun analogies, give this a like or share to spread the knowledge! Now, let me take you on a quick adventure to understand Angular route parameters.

---

Imagine I’m a courier in a sprawling city. My job is to deliver packages to specific houses, but each house has unique needs—some want books, others want food. How do I know what to bring? Easy: the address and package type are written right on the delivery note. That note? It’s just like Angular route parameters.

In my world of deliveries, the address is the route—it’s where I’m headed. But the details about what to bring (like “books” or “food”) are the parameters. When someone places an order, they might write something like 123-Main-St/books or 456-Pine-Lane/food—and I know exactly what to deliver and where to go.

Angular works the same way. The route (/profile/:userId) is like the address, and the parameters (like :userId being 42) tell Angular what specific data to handle. I grab those details using Angular’s ActivatedRoute service. It’s like the courier glancing at their delivery note to know what’s in the package.

So when Angular loads a component, it’s as if I, the courier, have reached the house. The ActivatedRoute helps me unpack the package—whether it’s showing a user’s profile based on their userId or loading a product detail by its productId. The parameters guide the process every time.

---

Let’s continue being a courier. Here’s how Angular helps me deliver those packages programmatically. Suppose I have a route configuration in Angular:

const routes: Routes = [
  { path: 'profile/:userId', component: UserProfileComponent },
  { path: 'product/:productId', component: ProductDetailComponent },
];

This is like my delivery note specifying paths (profile or product) and placeholders for parameters (:userId and :productId).

Step 1: Define a Route with Parameters

When a user navigates to profile/42, Angular knows the :userId parameter will be 42. The same applies to product/101—:productId will be 101.

Step 2: Grab Parameters with ActivatedRoute

Inside the corresponding component (e.g., UserProfileComponent), I can retrieve these parameters with Angular’s ActivatedRoute service:

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

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
})
export class UserProfileComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('userId')!;
    console.log(`Delivering to user with ID: ${this.userId}`);
  }
}

Here’s what happens:

1. The ActivatedRoute acts like me checking the delivery note for details.
2. The snapshot.paramMap.get('userId') pulls the parameter from the route.

Step 3: Respond Dynamically

Parameters can also change while navigating within the same component. For example, if I’m updating a user’s profile but want to handle new IDs dynamically, I’d subscribe to route changes:

this.route.paramMap.subscribe(params => {
  this.userId = params.get('userId')!;
  console.log(`Now delivering to a new user with ID: ${this.userId}`);
});

Bonus: Sending Parameters Programmatically

If a button redirects the courier to a specific house, Angular makes it simple:

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

constructor(private router: Router) {}

goToUserProfile(userId: string): void {
  this.router.navigate(['/profile', userId]);
}

This programmatically sets the userId in the URL, just like creating a new delivery note!

---

Key Takeaways:

1. Routes Define the Path: Use :param syntax to specify placeholders in routes.
2. ActivatedRoute is Your Guide: It helps fetch route parameters with snapshot or subscriptions.
3. Dynamic Navigation: Use Router to programmatically set route parameters.