CODEWITHSUNDEEP
angularquery-string
Kajot
Kajot

Reputation: 1152

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

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?

Upvotes: 26

Views: 26812

Answers (3)

starterProgrammer
starterProgrammer

Reputation: 286

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 :)

Upvotes: 1

Avinash Dangi
Avinash Dangi

Reputation: 81

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']);
    };
)}

Upvotes: 4

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657466

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

Upvotes: 44

Related Questions