Read URL parameters in Angular
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.