“Route Parameters in Angular: Dynamic Routing Explained”-(Angular No-11)

In Angular, route parameters allow you to pass dynamic values to routes. This is useful for displaying data that varies based on the input, such as user profiles, product details, or search results. Route parameters are a core part of Angular’s routing module, making capturing and using parameters from the URL easy.

How Route Parameters Work in Angular

1. Defining Route with Parameters You define route parameters in the route configuration. Route parameters are prefixed by a colon (:) in the route path definition.

Example:

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

In this case, the:id is a placeholder for the dynamic part of the URL. When a user navigates to /user/123, the id parameter will capture 123.

2. Navigating a Route with Parameters You can programmatically navigate a route using Angular’s Router service.

Example:

constructor(private router: Router) {}

navigateToUser() {
  this.router.navigate(['/user', 123]);
}

3. Accessing Route Parameters In your component, you can access route parameters via the ActivatedRoute service.

Example:

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

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

  constructor(private route: ActivatedRoute) {}

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

Here, paramMap.get('id') retrieves the value of the id parameter from the route.

4. Observable Parameters If your component needs to respond to changes in the route parameters (e.g., if the same component is used for different routes and the parameters change without reloading the page), you can subscribe to the paramMap observable.

Example:

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

This ensures that the component reacts to any changes in the route parameters dynamically.

5. Optional Route Parameters Angular also supports optional route parameters. Optional parameters are appended after a semicolon (;), and are not required when navigating.

Example:

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

Then, the URL /user/123;token=abc will have both the id and token parameters.

6. Query Parameters If you want to pass parameters as part of a query string (e.g., ?page=1), you can also access those using Angular’s ActivatedRoute.

Example:

ngOnInit() {
  this.route.queryParamMap.subscribe(params => {
    const page = params.get('page');
    console.log('Page:', page);
  });
}

When you navigate with query parameters, you can do so like this:

this.router.navigate(['/user', 123], { queryParams: { page: 1 } });

Summary:

• Route parameters: Allow you to pass dynamic data through the URL (e.g., /user/123).
• ActivatedRoute: The service used to retrieve route parameters in a component.
• Snapshot: For static parameters or use paramMap.subscribe() for dynamic changes.
• Query parameters: Append ?key=value to the URL for additional filtering or state.

Route parameters are a powerful feature in Angular, enabling flexible and dynamic routing for your applications.