Angular2, how to clear URL query params on router navigate

Question

I am struggling with clearing out URL params during nav in Angular 2.4.2. I have tried attaching every option to clear the params in the below navigation line, or any mix therein with navigate, or navigateByUrl, but cannot figure out how to accomplish.

this.router.navigateByUrl(this.router.url, { queryParams: {}, preserveQueryParams: false });

As an example I am at route /section1/page1?key1=abc&key2=def and want to stay at the same route but remove all the url parameters, so the end result should be /section/page1

Maybe - this.location.replaceState(path_only_str) after router event. - angular.io/docs/ts/latest/api/common/index/Location-class.html - What is the referrer? cuz you can also use skipLocationChange on routerLink to remain in the current state. — Dylan
– Dylan, Commented Apr 27, 2017 at 20:01
this.router.navigate([], { queryParams: {}, replaceUrl: true }); — GGJ
– GGJ, Commented Feb 6 at 15:53

Joshua Ohana · Accepted Answer · 2017-04-28 15:10:33Z

25

As DeborahK pointed out, when I was navigating to this.router.url, that URL already had the url params embedded. To solve I stripped the params off the URL as a string, and then used navigateByUrl to jump there.

let url: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(url);

answered Apr 28, 2017 at 15:10

Joshua Ohana

6,14915 gold badges65 silver badges122 bronze badges

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

Comments

DeborahK · Accepted Answer · 2017-04-27 19:15:21Z

14

Using navigateByUrl will drop off the query parameters if you pass it a URL without the query parameters.

Or you could try:

this.router.navigate(this.router.url, { queryParams: {}});

NOTE: navigate and not navigateByUrl

Does that work?

edited Apr 27, 2017 at 19:15

answered Apr 27, 2017 at 19:03

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

11 Comments

Joshua Ohana Over a year ago

That's what I had thought too, and what the docs seem to indicate should the case, but it's definitely not. In the case mentioned above I use navigateByUrl(this.router.url) while the url is something like "domain.com/section/page?param=a&other=b" ... I'd expect it to have to "domain.com/section/page" but the url parameters persist

DeborahK Over a year ago

You are passing the URL with the query parameters so it will continue to have those parameters. You'd need to pass the url without the parameters.

DeborahK Over a year ago

There are some additional suggestions here: stackoverflow.com/questions/38186636/…

DeborahK Over a year ago

I'm adding one more suggestion to my answer above.

Joshua Ohana Over a year ago

Thanks DeborahK you were totally on the right track; however, that additional suggestion also didn't work, the url parameters would persist since this.router.url has them embedded. I have solved by simply stripping the params off the string manually and then routing by url (self-answered below)

|

David Newswanger · Accepted Answer · 2018-09-07 18:29:46Z

13

If you don't want to reload the page you can also use Location

import { Location } from '@angular/common';
[...]
this.location.replaceState(this.location.path().split('?')[0], '');

this.location.path() provides you with the current path. You can remove the params by resetting the page's path with everything in the URL before the ?.

answered Sep 7, 2018 at 18:29

David Newswanger

1,0831 gold badge10 silver badges11 bronze badges

1 Comment

caden311 Over a year ago

Work perfect if you don't want to refresh the page

jsnewbie · Accepted Answer · 2018-12-13 14:17:59Z

11

You can add replaceUrl: true in your navigation extras. This way, the router will navigate to the same page but you still remain in the same state in history with the url parameters gone, while still allowing you to go back to the previous route.

From the docs:

Navigates while replacing the current state in history.

this.router.navigate([], { replaceUrl: true});

answered Dec 13, 2018 at 14:17

jsnewbie

1,83915 silver badges9 bronze badges

Comments

random_user_name · Accepted Answer · 2019-07-07 19:40:48Z

6

Use the skipLocationChange option and it will not show parameters: suppose your url is

http://localhost/view

now something in your code sets the query parameters to

?q=all&viewtype=total

without the skipLocationChange your url in the browser ( after calling navigate) would be :

http://localhost/view?q=all&viewtype=total

with skipLocationChange : true it remains

http://localhost/view

let qp = { q : "all" , viewtype : "total" } 
this.router.navigate(['/view'], {  queryParams: qp,skipLocationChange: true });

edited Jul 7, 2019 at 19:40

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

answered Oct 6, 2017 at 22:07

Cjolly

5105 silver badges8 bronze badges

2 Comments

Ginger Opariti Over a year ago

As I came late here with the same problem, in my opinion this is the right solution to use

priya_21 Over a year ago

can i use the same for redirecting to external url ? for example I am in xyz.com I want to redirect abc.com . Any suggestions please

Nick H · Accepted Answer · 2021-06-14 21:53:42Z

6

This will clear the URL with no hardcode and will not re-load the page.

constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router
    )
...
     this.router.navigate([], {
                relativeTo: this.activatedRoute,
                queryParams: {},
                replaceUrl: true,
            });

answered Jun 14, 2021 at 21:53

Nick H

4941 gold badge6 silver badges13 bronze badges

1 Comment

Grant Over a year ago

Worked, nice one! :)

Bharat chaudhari · Accepted Answer · 2020-07-17 09:44:10Z

5

Here is a simple one

this.router.navigate([], {});

// Or

this.router.navigate([], {
  queryParams: {
   param1:'',
   param2:''
  }
 });

answered Jul 17, 2020 at 9:44

Bharat chaudhari

5346 silver badges7 bronze badges

Comments

Sudheer Muhammed · Accepted Answer · 2019-12-30 07:25:51Z

3

From angular 7.2 onward, you can use state

Sending

this.router.navigate(['routename'], { state: { param1: 'bar' } });

Receiving

let paramobj = history.state;
console.log(paramobj.param1);

By this you can send even large complex objects from template as well.

edited Dec 30, 2019 at 7:25

answered Dec 29, 2019 at 7:46

Sudheer Muhammed

8938 silver badges11 bronze badges

4 Comments

Robin De Schepper Over a year ago

Could you provide links to the Angular documentation for information on the API's that you use?

Sudheer Muhammed Over a year ago

@RobinDeSchepper angular.io/api/router/NavigationExtras

Robin De Schepper Over a year ago

And this history object?

Sudheer Muhammed Over a year ago

@RobinDeSchepper it is ann inner object of Window object . For more details visit - developer.mozilla.org/en-US/docs/Web/API/Window/history

Tomislav Brabec · Accepted Answer · 2024-02-29 23:09:55Z

0

I have updated @Joshua Ohana answer a little bit:

    const getRouterPathUrl = (fullUrl: string): string => (fullUrl.includes("?") ? fullUrl.substring(0, fullUrl.indexOf("?")) : fullUrl);

    this.router.navigate([getRouterPathUrl(this.router.url)],
        {
            queryParams: params,
            replaceUrl: true
        }
    );

This way, you will be able to update and clear query params on any change from your app.

answered Feb 29, 2024 at 23:09

Tomislav Brabec

5592 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular2, how to clear URL query params on router navigate

9 Answers 9

Comments

11 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

11 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related