Skip to main content

Route Parameters

In Angular, a typical web application involves navigating between different components as users interact with the application. Angular's Router Module provides tools that support navigation from one view to the next as users perform tasks. One key part of this navigation is the use of Route Parameters.

What are Route Parameters?​

Route parameters are parts of the URL that are dynamic. They change based on the object that we want to display or the action we want to perform. They are essential in creating an effective user interface.

For instance, consider an application that displays information about users. We may want to have individual routes to display information for each user. Instead of creating a new route for every user, we can use a route parameter to create a dynamic path.

How to Define Route Parameters​

In Angular, we define a route parameter by placing a colon (:) in front of a segment in the path property of a Route. 

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

In the above example, :id is a route parameter.

Accessing Route Parameters​

To access route parameters in a component, we use the ActivatedRoute service provided by Angular.

First, import the ActivatedRoute service:

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

Then, you can inject the service into the constructor of your component:

constructor(private route: ActivatedRoute) { }

Finally, you can use the snapshot property of the ActivatedRoute service to access the route parameters:

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

In the above example, the paramMap property is an Observable map of all the route parameters. We use the get method to retrieve the value of a parameter.

Observing Route Parameters​

In some cases, the component may need to re-fetch data whenever the parameter changes. For this, we need to subscribe to the paramMap Observable. 

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    let id = params.get('id');
    // Fetch new data with 'id'
  });
}

In this example, the arrow function inside the subscribe method is called every time the route parameters change.

Optional Route Parameters​

Apart from required parameters that we define in the route configuration, Angular also supports optional parameters that you can use to pass additional optional information between routes.

To specify optional parameters, you can use the NavigationExtras object in the navigate method of the Router service.

this.router.navigate(['/user', { id: userId, foo: 'foo' }]);

In the above example, id and foo are optional route parameters.

To access optional parameters, you can use the snapshot property of the ActivatedRoute service, similar to required parameters.

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

In summary, route parameters in Angular are a powerful tool that allows you to create complex and dynamic routes in your applications. They provide a way to handle variations in route paths, making your applications more flexible and user-friendly.