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

Answer 1

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

Answer 2

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?

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

Here is a simple one

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

// Or

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

Answer 8

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,
            });