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?

Improve this question
5
  • Not sure of your issue, seems to worke here Commented Apr 27, 2022 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 {} Commented Apr 27, 2022 at 13:30
  • You can clearly see that it gets updated in real time though Commented Apr 27, 2022 at 13:31
  • updating the url is not my problem; retrieving back is not working. Commented Apr 27, 2022 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. Commented Apr 27, 2022 at 13:42
Related questions
3080
How do I modify the URL without reloading the page?
2468
Get the size of the screen, current web page and browser window
2086
Scroll to the top of the page using JavaScript?
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.