Angular is it possible to detect if query Paramter has changed?

angular query-parameters
Kai picture Kai · Dec 28, 2017 · Viewed 8.5k times · Source

Angular is it possible to detect if query Paramter has changed? I have a Component that handles 2 query paramters and according to what paramter you come with it sets some variables true or false. The Problem is if im on my component with queryparameter 1 the qp can change to the second paramter without leaving the component and in that case i need to set variables diffrently. So how do I detect that? Is that even possible?

Answer

Günter Zöchbauer picture Günter Zöchbauer · Dec 28, 2017

You can subscribe to the params in the root component

constructor(route:ActivatedRoute) {
    route.queryParams.subscribe(p => console.log(p.myQueryParam)); // you can also do this in ngOnInit
}

See also https://angular.io/api/router/ActivatedRoute

You can have query params on other route levels as well, but then they are called matrix parameters.

See also the end of this section https://angular.io/guide/router#route-parameters-required-or-optional

Related questions

Angular: How to update queryParams without changing route

I am trying to update (add, remove) queryParams from a component. In angularJS, it used to be possible thanks to : $location.search('f', 'filters[]'); // setter $location.search()['filters[]']; // getter I have an app with a list that the …

Read More
Angular: append query parameters to URL

Im using this: import { HttpParams } from '@angular/common/http'; let params = new HttpParams(); params.append('newOrdNum','123'); But this is not working, i dont append param in url. Any suggestion?

Read More
Angular 4 - Route query params cause path match failure

After searching multiple threads/questions on the various types of routing within Angular 4, I cannot resolve an issue linked to passing queryParams to an Angular 4 route. When passing either into the url http://localhost/search;x=y through the template […

Read More