Angular Routing and Navigation: Route Parameters

In the previous chapter, we learned how to configure routing in Angular to enable navigation within our application. In this chapter, we will delve deeper into handling route parameters—allowing us to pass data and state between routes.

Introduction to Route Parameters

Route parameters are a mechanism for passing data to specific routes within your application. They enable information—such as user IDs or product IDs—to be embedded directly into URLs (e.g., /user/123) and subsequently accessed by the target component.

Defining Route Parameters

In Angular, route parameters are defined directly in the route configuration. Here’s a simple example:

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

In the above code, user/:id defines a route where :id is a placeholder for a dynamic value. When navigating to /user/1, the :id segment is replaced with "1"—this becomes the route parameter.

Retrieving Route Parameters

To access route parameters inside a component, we use Angular’s ActivatedRoute service. Below is an example of retrieving the id parameter in the UserComponent:

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

@Component({
  selector: 'app-user',
  template: `
    <h2>User ID: {{ userId }}</h2>
  `
})
export class UserComponent implements OnInit {
  userId: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Subscribe to route parameter changes
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
    });
  }
}

Here, we inject ActivatedRoute and use its paramMap observable to retrieve route parameters. Inside the ngOnInit() lifecycle hook, we assign the extracted id value to the userId property.

Using Route Parameters

Once retrieved, route parameters can drive dynamic behavior—for instance, fetching and displaying user-specific data.

Here’s an extended example that loads user data based on the userId:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  template: `
    <h2>User ID: {{ userId }}</h2>
    <div *ngIf="user">
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `
})
export class UserComponent implements OnInit {
  userId: string | null = null;
  user: any; // Type should be refined per your domain model

  constructor(
    private route: ActivatedRoute,
    private userService: UserService
  ) {}

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

  loadUserData(id: string | null): void {
    if (id) {
      this.userService.getUserById(id).subscribe(data => {
        this.user = data;
      });
    }
  }
}

In this version, we introduce a UserService to fetch user details via the id, then render them in the template.

Query Parameters

Beyond route parameters, Angular also supports query parameters—key-value pairs appended to the URL after a ?, commonly used for filtering, sorting, or pagination (e.g., /users?sort=asc&limit=10).

You can access them using queryParamMap:

this.route.queryParamMap.subscribe(params => {
  const sortOrder = params.get('sort');
  const limit = params.get('limit');
});

Summary

In this chapter, we explored how to define, retrieve, and utilize route parameters—and briefly covered query parameters—in Angular applications. Leveraging these features enables dynamic, context-aware navigation and significantly enhances user experience.

In the next chapter, we’ll explore services and dependency injection—powerful tools for structuring reusable logic and managing application state.

By mastering route parameters, you’ll be well-equipped to build flexible, responsive Angular applications with rich navigational capabilities!