Routes with multiple and query parameters

Introduction

Route parameters can be optional as well. As we have seen routes with a specific variable present in the route configuration. Now we will study how routes with multiple parameters are configured. Routes with multiple parameters will help in Search Engine Optimization(SEO). For better SEO we include multiple parameters in our routes. More parameters refer to more information about the page being displayed. 

Route with multiple parameters

Suppose we think of adding site name and site address with side id in the route configuration. Then we need to modify the route as follows. We will prefer using the path variable or route parameters in the scenarios where:
  • the path variable will uniquely identify the page or resource.
  • the parameter value is required.

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

Now we will go to site.html page where we render the link for each site as follows:
The first element is the path and the subsequent elements are parameters. Now we have id, name, and address as our route parameters.

<div>
  <a [routerLink] = [ '/site', site.id, site.name, site.address ] </a>
</div>

Query Parameters

We will prefer to use a query parameter in the route configuration in the below scenarios:
  • When the parameter value is optional.
  • When the value is complex.
  • Query parameters work as unique identifiers for the page.
  • When we want to sort or filter items, use query parameters.
There are two ways of using query parameters. We can use queryParams property with routerLink property binding to pass the optional query params. We are passing two query parameters: type and order. The value of these parameters can be dynamic. Here we are giving a static value in our example.

<div>
  <a routerLink = "/sites" [queryParams] = { type: 'public' , order: 1}</a>
</div>

Query param with Router.navigate

navigateSites() {
     this.router.navigate( ['/sites'], { queryParams: { type: 'public' , order: 1} });
}

The URL will look something like this:

http://localhost:4200/sites?type=public&order=1

Query Params With queryParamsHandling

Generally, query parameters will be lost on navigating from one page to another. If in some scenarios we need to preserve our query parameters, we will use queryParamsHandling. We can set its value to either "preserve" or "merge". Suppose we are navigation from sites to network page and you want to keep the query parameters. Then we will set queryParamsHandling to preserve.
navigateToNetworks() {
  this.router.navigate(['/network'], { queryParamsHandling: 'preserve' });
}

If we want to pass additional query parameters while navigating to networks page. We can pass it in the following way. If we need query parameters from the previous page as well as the upcoming page, then we will set queryParamsHandling to merge.
navigateToNetworks() {
  this.router.navigate(['/network'],
 { 
    queryParams: { networkType: "newest" } ,
    queryParamsHandling: 'preserve' 
  });
}

The resulting URL will now look like as follows when we navigate from site to network with queryParamsHandling to merge.
http://localhost:4200/networks?type=public&order=1&networkType=newest

The same can be written with Router.navigate in the following way:

<div>
   <a [routerLink]="['/networks']"
   [queryParams]="{ networkType: 'newest' }"
   queryParamsHandling="merge">
  Networks
   </a>
</div>

Accessing the Query Parameters

For getting parameters we will call an observable queryParamMap that contains optional query 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 queryParamMap 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.queryParamMap.subscribe(params => 
   {
       console.log(params); 
       this.queryObject = {...params.keys, ...params};
    });

We can get the query parameters using below also:

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

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.queryParam1 = this.route.snapshot.queryParamMap.get("type");
     this.queryParam2 = this.route.snapshot.queryParamMap.get("networkType");
  }
}


Comments