16

I have a component registered at /contacts, which displays a list of contacts. I've added an <input [value]="searchString"> for filtering the displayed list.

Now I'd like to display the searchString within the URL in form of a Query Param. (Using the New Router 3.0.0 RC2)

The official docs ( https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters ) show how to use router.navigate for changing the queryParams. But this seems awkward, because I just want to change the queryParams without having to know which route I'm currently at: router.navigate(['/contacts'], {queryParams:{foo:42}})

(I know that it doesn't reload the component if I'm just changing the queryParams, but still this doesn't feel right to write)

After some attempts I figured out that router.navigate([], {queryParams:{foo:42}}) works. This feels way better.

But I'm still not sure if that's the right way. Or if I missed some method for this.

How do you change your queryParams?

Benjamin M
  • 23,599
  • 32
  • 121
  • 201
  • So how about putting the search query in a route param like `/contacts/:search-query` in your router file and observe it in your component for changes? – mrgoos Sep 09 '16 at 19:32
  • Would this make any difference? I can observe the `queryParams` as well, that's not the problem. `...` My current component has about 20 search parameters, most of them are optional and some of them exclude each other. When the user changes any parameter, the displayed list will get filtered, and additionally I want to reflect these parameter changes within the URL. `...` The question was just about *"What's the right way to set the `queryParams`?"* or *"Is `router.navigate([], ...)` the only/correct way?"* – Benjamin M Sep 09 '16 at 19:46
  • 1
    Thanks for the answer, it helped me. I use router.navigate([], { queryParams: { ... }}) too now. – skovmand Sep 29 '16 at 20:12

1 Answers1

23

If you look into Router class declaration you can find that:

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

Also it returns promise with value if navigation was successful or not.

navigate(commands: any[], extras?: NavigationExtras): Promise;

commands - array of commands to Router where to navigate;

extras - optional parameter where you specify additional properties like query parameters

If you look into NavigationExtras class you will find that not only you can specify query parameters to Router, but also set preserve previous query parameters etc.

I used navigate method like this:

this.router.navigate([], {
        queryParams: objectWithProperties,
        relativeTo: this.activeRoute
    });

where empty array means that location does not change and in extras i define query parameters using object with properties.

Angular resolves that object into something like this:

siteBasePath/routerDirectory?propertyName=propertyValue

Here are more useful information and examples which I found very useful: http://vsavkin.tumblr.com/post/145672529346/angular-router

I hope someone will find this useful.

Community
  • 1
  • 1
Imants Volkovs
  • 838
  • 11
  • 20
  • this is good. the only downside it does not trigger the `ngOnInit`. So if a queryParameter changes and we need to make a api call, we need to watch to route events. Is this correct? – DAG Jul 05 '17 at 16:30
  • 1
    You can do this in the ngOnInit if you use Observables. I'll post the code in your original question here: https://stackoverflow.com/questions/44930868/angular-navigate-to-url-by-replacing-an-existing-parameter?noredirect=1#comment76838644_44930868 – DeborahK Jul 05 '17 at 16:38