28

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

Joshua Ohana
  • 5,613
  • 12
  • 56
  • 112
  • Maybe - `this.location.replaceState(path_only_str)` after router event. - https://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 Apr 27 '17 at 20:01

8 Answers8

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);
Joshua Ohana
  • 5,613
  • 12
  • 56
  • 112
15

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?

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • 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 – Joshua Ohana Apr 27 '17 at 19:05
  • 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 Apr 27 '17 at 19:06
  • There are some additional suggestions here: http://stackoverflow.com/questions/38186636/remove-a-parameter-from-queryparams-angular-2 – DeborahK Apr 27 '17 at 19:07
  • I'm adding one more suggestion to my answer above. – DeborahK Apr 27 '17 at 19:07
  • 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) – Joshua Ohana Apr 28 '17 at 15:09
  • how to make it without using queryParams? We have normal params like `/page/param1/` and we want to replace those params from component, which doesnt know about the current URL – DAG Jul 08 '17 at 18:41
  • In fact, it doesn't work. this.router.url includes the query params now – e-cloud Sep 22 '17 at 02:09
  • This worked for me: `this.routerExtensions.navigate([this.router.url.substring(0, this.router.url.indexOf("?"))], { animated: isIOS ? true : false, skipLocationChange: true });` – kenny Feb 14 '18 at 10:24
  • I did something similar - `this.router.navigate([this.location.path().substring(0, this.location.path().indexOf('?'))]);` – Oorja Jul 10 '18 at 06:19
  • 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 – priya_21 Mar 06 '19 at 13:56
  • https://stackoverflow.com/questions/34338440/how-to-redirect-to-an-external-url-in-angular2 – DeborahK Mar 11 '19 at 18:51
12

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 ?.

David Newswanger
  • 1,073
  • 1
  • 10
  • 11
10

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});
jsnewbie
  • 1,721
  • 13
  • 9
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 });
random_user_name
  • 25,694
  • 7
  • 76
  • 115
Cjolly
  • 482
  • 5
  • 7
4

Here is a simple one

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

// Or

this.router.navigate([], {
  queryParams: {
   param1:'',
   param2:''
  }
 });
Bharat chaudhari
  • 484
  • 5
  • 7
4

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,
            });
Nick H
  • 464
  • 1
  • 5
  • 12
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.

Sudheer Muhammed
  • 813
  • 8
  • 10