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

Question

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?

Is that even a required use case, I dont understand when do someone actually need a query param in angular. why cant u pass input to coponent — Jins Peter
– Jins Peter, Commented Dec 28, 2017 at 7:42
@JinsPeter If, for instance, your have some param to pass through your entire application (i.e. your url looks like mydomain.com/#myParam/myRoute), and for some reason you refuses to use global variables. — Shikatsu Kagaminara
– Shikatsu Kagaminara, Commented Jul 31, 2018 at 13:36

Marco · Accepted Answer · 2020-08-12 15:18:47Z

45

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

edited Aug 12, 2020 at 15:18

Marco

1,10310 silver badges24 bronze badges

answered Dec 28, 2017 at 7:42

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Günter Zöchbauer Over a year ago

Glad to hear. The 2nd part was only additional information in case you didn't know about the difference between query and matrix parameters.

Marco · Accepted Answer · 2020-08-13 07:41:30Z

4

You can subscribe to the params observable provided by ActivatedRoute module to observe changes in the query parameters.

constructor(private route:ActivatedRoute) {
    this.route.params.subscribe(
        (params:Params)=>{
            console.log(params['yourId']);
    };
)}

edited Aug 13, 2020 at 7:41

Marco

1,10310 silver badges24 bronze badges

answered Dec 28, 2017 at 9:13

Avinash Dangi

815 bronze badges

2 Comments

Günter Zöchbauer Over a year ago

params is for route params, not for query params.

Trafalino Over a year ago

@GünterZöchbauer your comment made me to understand

starterProgrammer · Accepted Answer · 2023-09-11 20:37:03Z

1

In my case i wanted to reload page if queryParams changed to new...

Router was:

tabs/home/product?id=1984

So I wanted to call productDetails() again if id params is changed!

Solution

constructor(){
 //Recive Product Id 
  activatedRoute.queryParamMap.subscribe((data) => {
    if (this.product_id != undefined && this.product_id != 
        data['params'].id) {
        console.log('we can reload page');
        this.product_id = data['params'].id
        this. productDetails()
   }else{
    this.product_id = data['params'].id
    }
   })
}

it Worked For me! Hope it will Help :)

answered Sep 11, 2023 at 20:37

starterProgrammer

3083 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related