Getting Route Information in a Component in Angular

Introduction

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

Using Query Parameters with RouterLink

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

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.

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

2. { 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.

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.

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:

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

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.

employee-list.component.ts

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.

RouterLink for Dynamic Data

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.

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.