Angular 2: "router.navigate" Encoding error in the URL

Question

When I submit a form, I want to navigate to another site and set the search values in the URL as parameters.

I've got following code:

searchOffers() {
    this.router.navigate([
      '/search?query= +
        this.search.value.FG
    ]);
  }

This Code work's, but the URL look like this after the routing.

localhost:4200/search%3Fquery%3D1 

(The query parameter value is 1).

With this URL I cant fetch the parameters.

How can I format the URL to this: localhost:4200/search?query=1 ?

Answer 1

I've had the case where I get a string with the whole url including the query params.

In this case you can do this

    searchOffers() {
    this.router.navigateByUrl('/search?query= +
        this.search.value.FG);
    }

Answer 2

Make use of the options parameter:

searchOffers() {
    this.router.navigate(['/search'], { queryParams: { query: this.search.value.FG } });
  }