CODEWITHSUNDEEP
angularangular2-routing
Joshua Ohana
Joshua Ohana

Reputation: 6121

Angular2, how to clear URL query params on router navigate

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

Upvotes: 28

Views: 51744

Answers (9)

Tomislav Brabec
Tomislav Brabec

Reputation: 559

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.

Upvotes: 0

Nick H
Nick H

Reputation: 494

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

Upvotes: 6

Bharat chaudhari
Bharat chaudhari

Reputation: 534

Here is a simple one

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

// Or

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

Upvotes: 5

Sudheer Muhammed
Sudheer Muhammed

Reputation: 893

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.

Upvotes: 3

Cjolly
Cjolly

Reputation: 490

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

Upvotes: 6

jsnewbie
jsnewbie

Reputation: 1819

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

Upvotes: 10

David Newswanger
David Newswanger

Reputation: 1083

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

Upvotes: 13

Joshua Ohana
Joshua Ohana

Reputation: 6121

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

Upvotes: 25

DeborahK
DeborahK

Reputation: 60518

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?

Upvotes: 15

Related Questions