Getting Route Information in a Component in Angular

Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!


Managing the state is one of the key and tough decisions to be made while architecting a web application. Some states have to be remembered even though the browser is refreshed, some do not. In these cases, local / session storage would be the best option to choose. In some cases, where you want the application to cache an API call data, we can simply keep that data in a state, and extract and store it in a state management library whenever needed.

Another way to remember the state is the URL, suppose you are navigating from the employee list page to the employee details page. Of course, the application has to preserve some information about what record has been clicked from the listing page. For that, we can pass the record id in the URL, perhaps as a URL segment /employee/1/details or query parameter.


In this chapter, we will be looking at how to pass data from URL either query parameter or route parameter. Accessing the global route object, and current route object. How to access if there is any route-specific data that has been passed along route navigation.


Angular has constructed a dedicated @angular/router API for handling routing in the framework. How this router API works is, you had to pass through a collection of routes to RouterModule, then accordingly router-outlet placeholder directive ensures, the matching URL path loads its relevant component according to route configuration. Not just data, you pass data along with the route while navigating. There are separate services, that fetch URL parameters with ease either in an observable stream or POJO object.

Using Query Params in Angular Routing

There are multiple ways to pass parameters in the URL or access parameters from the URL. It can be achieved either declaratively or imperatively.

Accessing Query Parameter Values

To access the query parameter from the URL we have to inject ActivatedRoute first in the component constructor. Later

Using Query Parameters with Router.navigate

this.router.navigate('/employee/list', {
  queryParams: { search: 'alan' },

We've already seen how to use the Router navigate function to navigate between routes.

<a [routerLink]="['/employee/list']"
  [queryParams]="{ search: 'alan' }">
  Employee List Search

Preserving or Merging Query Parameters with queryParamsHandling

There are two kinds of queryParamsHandling techniques that help to play around with query params formation strategy.

  1. { queryParamsHandling: 'preserve' }

Suppose you have a use case where you have to navigate between routes and preserve the current set of query parameters for the next navigation route. That means navigation from /employee/list?search=text to /employee/1/details?search=text

How you can Achieve it?

  • Get all parameters from the URL
  • In the next navigation pass the object as queryParams parameter in configuration.
const queryParams = this.activatedRoute.snapshot.queryParams;

this.router.navigate('/employee/1/details', {

The above code does work, but this can be easily done by setting a strategy of queryParamsHandling to preserve.

this.router.navigate('/employee/1/details', {
  queryParamsHandling: 'preserve' 
<a [routerLink]="['/employee/list',, 'list']"
  Alan Trent
  1. { queryParamsHandling: 'merge' }

In addition to the above used case, suppose we want to redirect to the next route along with query parameters of the current route + navigating query params. That means navigation from /employee/list?search=text to /employee/1/details?search=text&click=true. To achieve this easily in angular you can do this by setting queryParamsHandling to merge.

this.router.navigate('/employee/1/details', {
  queryParams: { click: true },
  queryParamsHandling: 'merge',
<a [routerLink]="['/employee',, 'list']"
  queryParamsHandling="merge" [queryParams]="{ click: true }">
  Alan Trent

Getting Information from Route using ActivatedRoute

ActivatedRoute is a dedicated service that contains current route information like params, queryParams, data, observable streams of all these, snapshot, etc.

Import ActivatedRoute and ParamMap to Your Component.

import { ActivatedRoute, ParamMap, Router, QueryParams } from '@angular/router';

The above statement imports important elements mentioned below.

  • Router
  • ActivatedRoute
  • ParamMap
  • QueryParams

Inject an Instance of ActivatedRoute by Adding it to Your Application's Constructor

Inject ActivatedRoute inside a constructor:

  private route: ActivatedRoute,
) { }

Update the ngOnInit() Method to Access the ActivatedRoute and Track the Name Parameter

We can track queryParams in two ways

  1. Take it from this.activatedRoute.snapshot.queryParams

  2. Subscribe on this.activatedRoute.queryParams

ngOnInit() {
  // non observable way
    'name parameter value',
  // observable way
  this.activatedRoute.queryParams.subscribe(params => { = params['name'];

Sending Data while Routing

What if we want to send data along with route navigation? The data shouldn't be polluting the URL. Somehow when it landed on the route, we should be able to retrieve the data that has been sent.

Static Data from Route Cofiguration

One way to send data from the route is, by passing through the data property that exist on the route configuration.

const routes: Routes = [
    path: 'employee/list',
    component: EmployeeListComponent,
    data: { additionalInfo: { 'dummy': 'data' } },
    path: 'employee/:id/details',
    component: EmployeeDetailsComponent,



Inside a component code, you can access the data property from ActivateRoute snapshot. You will see the above line will print the static data object mentioned on route level.

What could be the way to pass dynamic data along the route? You can use window.history.state inbuilt browser history API to pass data between routes. To do that you have to set the value to window.history.state. It makes sure it attaches that data to the history of that instance. This is simplified in Angular, we can use state input property like below.

<a routerLink="/employee/list" [state]="{myData: 'data'}">
  Employee Listing

What would happen is, along routerLink link it fills up window.history.state for that specific route when navigation is completed. We can call this a declarative way to set history.state.

Dynamic Data using NavigateByURL

window.history.state can be set using another way by sending data in navigateByUrl function of Router API. Send the details in the ExtraNavigation 2nd parameter.

this.router.navigateByUrl('/employee/list', {
  state: { myData: 'data'}


We have learned the following things,

  • How to set up the ActivateRoute service, to access current route level details.
  • Static and dynamic way of passing information while navigating between routes.
  • Accessing query parameters and route parameters from the route.
Free Courses by top Scaler instructors