Query Parameters in Angular

In this article we will go through the steps in how to leverage the Query parameter feature in Angular. First thing first.

What is a Query parameter ?
A query parameter is a parameter that we pass from one route to another route. The best thing about query parameters is that we can subscribe them inside the target route. Let’s jump into code straight away.

For this we need to have an Angular application up and running. We will have two routes, Route 1 and Route 2 to showcase our demo. The code for app component will be similar to any bootstrapped Angular8 application.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testapp';
}

And the app.component.html will be having a header component which will contain the router links for our routes and a router-outlet to contain the contents of our routes.

app.component.html

<app-header></app-header>
<div class = "route-container">
  <router-outlet></router-outlet>
</div>

In the app.routing module file we will register our routes. This is pretty much straight forward.

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Route1Component } from './route1/route1.component';
import { Route2Component } from './route2/route2.component';
const routes: Routes = [
  {path: 'route1', component: Route1Component},
  {path: 'route2', component: Route2Component},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Just to add some styling to the app component we will write some basic css in app.component.css.

app.component.css

.route-container {
    height: 300px;
    width: 300px;
    border: solid 3px red;
    margin: 0 auto;
}

Now we will move towards the header component which will contain our routes. It will have two li links which we will capture through the click event of the li element.

header.component.html

<div class="header">
    <ul (click) = routeWithQueryParams($event)>
        <li>Route 1</li>
        <li>Route 2</li>
    </ul>
</div>

Now for a little bit of styling,

header.component.css

.header {
    height: 50px;
    display: block;
    position: relative;
    margin-left: 37%;
    margin-top: 15%;
}
ul {
    display: block;
}
li {
    list-style-type: none;
    float: left;
    margin-right: 50px;
    border: solid 3px green;
    background-color: green;
    width: 72px;
    text-align: center;
    color: white;
    font-size: 22px;
}

Inside the header.component.ts file the following code goes. Here we have a method routeWithQueryParams() which is used to get the selected route. It also routes to the correct path and attaches a query parameter in the navigate method.

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
  }
routeWithQueryParams($event) {
    const selectedRoute = $event.target.innerHTML;
    if (selectedRoute == 'Route 1') {
      this.router.navigate(['/route1'], { queryParams: { val: 'Query params for route 1' }});
    } else {
      this.router.navigate(['/route2'], { queryParams: { val: 'Query params for route 2' }});
    }
  }
}

Now let’s move to the Route 1 markup where we will have some content specific to that route and we will bind the value of query parameter coming from the route.

route1.component.html

<h2>Router 1</h2>
<h5>{{queryParam}}</h5>

The typescript file for the component will be something like below. Here on ngOnInit method we subscribe to the route and capture the incoming query parameter. Please notice that we have injected ActivatedRoute into the component. Here we assign the incoming query parameter value to a local variable which will eventually bind to the markup.

route1.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-route1',
  templateUrl: './route1.component.html',
  styleUrls: ['./route1.component.css']
})
export class Route1Component implements OnInit {
constructor(private route: ActivatedRoute) { }
queryParam: string = '';
  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.queryParam = params['val'];
    });
  }
}

Same thing goes for route2 as well.

The final output of the code will look like below.

This is all the basics of Angular8 query parameters.