0

I need to add queryParams dynamically to url without reloading page. So I carried out using the Location service as below,

this.location.go(`${path}?tab=xxx`); // works perfectly without page reload

Now the problem is when I try to access the queryParams it returns empty.

this.activatedRoute.queryParams.subscribe((qp) => {
      console.log('updated queryParams', qp); // returns {}
    });

whereas when the same code works if the page is reloaded properly. Any way to the same without refreshing the page in angular or should I try with native js?

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • Not sure of your issue, seems to worke [here](https://stackblitz.com/edit/angular-ivy-d6nury?file=src%2Fapp%2Fapp.component.ts) –  Apr 27 '22 at 13:24
  • @temp_user the above code update the url with queryParams but when i try to get it via `this.activatedRoute.queryParams.subscribe` it returns {} – Praveen Apr 27 '22 at 13:30
  • You can clearly see that it gets updated in real time though –  Apr 27 '22 at 13:31
  • updating the url is not my problem; retrieving back is not working. – Praveen Apr 27 '22 at 13:35
  • means `location` service doesn't listen the `activatedRoute.QueryParams`. whereas `this.router.navigate(['.'], { relativeTo: this.route, queryParams: { 'tab': 'xxx' }});` listens to the subscribe method as well as doesn't reload the page. Thanks @AndreiTătar for pointing out the question. – Praveen Apr 27 '22 at 13:42

0 Answers0