Read URL parameters in Angular

07 Mar 2020

When you search through internet for code snippet on how to grab URL parameters from Angular application, you'll come across different approaches and wonder why so many different variations exists. This post tries to clarify those queries and let you decide the suitable approach for your requirement.

In case you want to parse entire URL into different parts/segments and consume each, then I would recommend the post on parsing URL in Angular.

So, when you plan to read URL parameters while using Router module;
Angular provides you with ActivatedRoute object that you can inject in component to access URL route information as shown below

import { ActivatedRoute } from "@angular/router";
@Component({
  selector: 'my-url-reader'
})
export class MyUrlReaderComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
  }

}

 using that injected route object you can further read through URL params through any of the below approaches that suits your requirement

1. route.snapshot.paramMap:

Photos snaps are taken to capture a moment, similarly snapshot is a one-time capture which allows you to read through the URL parameters when that component is loaded for a particular route. If your application requirement is to just to read the URL parameter once and process on URL route change like '/page:id', then this suits your need. Sample usage is shown below

ngOnInit() {
  this.pageId = this.route.snapshot.paramMap.get("id");
  // Process page information based on the :id
}

In above code, you can read through the page id on component load and do an AJAX call to fetch the requested page information.

But let us consider, that your parameter (/page/:id) keeps on changing when URL clicks on various anchor links on the page like /page/1, /page/2..., then you would require a continuous watch on your parameter even though the page didn't reload (component didn't re-initialise), so the next approach allows you to do that 

2. route.paramMap.subscribe

Subscription refers to a continuous enrolment to a service (e.g., magazine subscription etc.,) . Similarly the ActivatedRoute allows you to subscribe to its URL parameter object. So when ever any change happens in the URL parameters, the subscribed method is triggered (RxJs concept) allowing you to handle the changes on page based on the current URL param. Sample usage shown below

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.pageId = params.get("id");
    // Do an ajax call and get the requested page information on /page/:id change
  })
}

 The above strategy helps you to handle the route parameter changes within a current route, though its not helpful if the entire route changes. e.g., /page/1 changes to /post/102 a different route. Because change in the route will result in destroying & loading of a new component. 

Note: In RxJs, you need to manually unsubscribe from any subscribed events during component destroy. But you need not unsubscribe from the paramMap, Angular automatically handles unsubscribe from paramMap when the ActivatedRoute object is destroyed i.e., ngDestroy() event.

Conclusion:

So, while using RouterModule

1. When a route param (/routename/:param) doesn't change at all,.. then go for Snapshot
2. When a route param changes within current route (/routename/:param), then go for Subscription

Hope this article helps you to pick the right flavour.

Related Posts