Route with parameters in Angular

Introduction

Angular routes enable us to show different components based on different URLs. As the user navigates from one page to another, the router activates different components based on the path available in the URL. Sometimes we need to pass a path with a different variable to enable the same component. In such cases, we will configure our route with path and query parameters based on the user requirement. 

Configuring the routes

Suppose we have a requirement where for different site id we need to show the same site details component page with information respective to specific id. In such cases, we need to configure routes with path or query parameters. In the below example if we have 10 ids then we have to write the below configuration as follows:

const routes: Routes = [
  { path: "site/1", component: Site1DetailsComponent },
  { path: "site/2", component: Site2DetailsComponent },
  { path: "site/3", component: Site3DetailsComponent },
  { path: "site/4", component: Site4DetailsComponent },
  ............
  ............. and so on
];

To do the same task Angular provides us a simple way as below. We can make one single component with the different variable part of the URL. The below route defined is called as parameterized route. 
  • The parameter to a route should begin with a colon(:) sign.
  • We can pass any number of parameters to a route.
  • Different parameters should have different names.
  • Non-parameterized routes always have more priority over parameterized routes. In the below example, the non-parameterized takes more priority. If we are going to site/site1 URL then Site1DetailsComponent is shown instead of SiteDetailsComponent.
  • 
    const routes: Routes = [
     { path: 'site/:id', component: SiteDetailsComponent },
     { path: 'site/site1', component: Site1DetailsComponent }, //This route has more priority than the above one
    ];
    

In the below example, we will pass the parameter to our route:


const routes: Routes = [
  { path: "site/:id", component: SiteDetailsComponent },
];

Getting the path parameters: ActivatedRoute

For getting the route parameters, we need to import a service called ActivatedRoute and inject into our constructor. The route path, parameters are available through this service. Our router builds a tree of ActivatedRoute objects that consist of the current router state. This service consists of important information about our route. We will inject this service in our constructor. 
For getting parameters we will call an observable ParamMap that contains both required and optional parameters passed to the route. ParamMap is an observable map so we can subscribe to it. The subscribe() method will take the parameter of type ParamMap shortly called as params and will return void. The paramMap type object will have keys and params. To get the value of a specific path parameter, we will use get() method shown below. 

import {ActivatedRoute} from "@angular/router";
.
.
.
constructor(private route: ActivatedRoute) {
    this.route.paramMap.subscribe(params => 
   {
  params.get('id');
    });
Another way for getting the parameters is as follows. We will use this implementation where we don't allow the user to stay on the same page and navigate back and forth.

import {ActivatedRoute} from "@angular/router";
.
.
.
constructor(private route: ActivatedRoute) {
    this.route.snapshot.paramMap.get('id'); 
}

Comments