Angular Router: Parameters and Nested Routing

Welcome back! In our previous lesson, we explored the basics of the Angular Router, focusing on paths, wildcards, and redirections. This foundational knowledge is crucial for building dynamic and user-friendly Angular applications. Today, we'll dive deeper into the Angular Router by exploring route parameters and nested routing. These concepts will allow us to create more dynamic and hierarchical navigation structures in our applications. By the end of this lesson, you'll be able to implement route parameters and nested routes, enhancing the navigation capabilities of your Angular applications. Let's get started! 🚀

Route parameters are a powerful feature in Angular that allows us to pass dynamic data through URLs. This is particularly useful when we want to navigate to a specific resource, such as a user profile, based on an identifier like a user ID.

To define a route parameter, we use the colon (:) syntax in the route path. Here's a simple example:

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

In this example, :id is a route parameter. When a user navigates to a URL like /user/123, the id parameter will capture the value 123. We can then retrieve this parameter in our component using the ActivatedRoute service.

Let's see how we can use route parameters to navigate to a user profile page. We'll start by retrieving the route parameter in our component.

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

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

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

In this code, we use the ActivatedRoute service to access the route parameters. The snapshot.paramMap.get('id') method retrieves the id parameter from the URL. This allows us to dynamically load user details based on the user ID. Remember to handle cases where the parameter might be missing or invalid to ensure a smooth user experience.