Angular 2 New Router: Change / Set Query Params

Question

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?

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
– mrgoos, Commented Sep 9, 2016 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
– Benjamin M, Commented Sep 9, 2016 at 19:46
Thanks for the answer, it helped me. I use router.navigate([], { queryParams: { ... }}) too now. — skovmand
– skovmand, Commented Sep 29, 2016 at 20:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 3, 2017 at 9:44

Imants Volkovs

83611 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DAG Over a year ago

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?

DeborahK Over a year ago

You can do this in the ngOnInit if you use Observables. I'll post the code in your original question here: stackoverflow.com/questions/44930868/…

Collectives™ on Stack Overflow

Angular 2 New Router: Change / Set Query Params

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related