In angular 2 how to preserve query params and add additional query params to route

javascript angular angular2-routing query-parameters
user7405505 picture user7405505 · Jan 18, 2017 · Viewed 13.4k times · Source

For example I am on route /cars?type=coupe and I want to navigate to the same endpoint with additional query params (but keeping existing one). I am trying something like this

<a [routerLink]="['/cars']" [queryParams]="{model: 'renault'}" preserveQueryParams>Click</a>

The initial query params are preserved (type=cars) but added ones (model=renault) are ignored. Is this expected/correct behavior or is some kind of bug? Looks like preserveQueryParams has priority over queryParams? Is there any other smooth solution?

Answer

DarkNeuron picture DarkNeuron · Nov 18, 2017

In Angular 4+, preserveQueryParams have been deprecated in favor of queryParamsHandling. The options are either 'merge' or 'preserve'.

In-code example (used in NavigationExtras):

this.router.navigate(['somewhere'], { queryParamsHandling: "preserve" });

In-template example:

<a [routerLink]="['somewhere']" queryParamsHandling="merge">

Related questions

In Angular, how do you determine the active route?

NOTE: There are many different answers here, and most have been valid at one time or another. The fact is that what works has changed a number of times as the Angular team has changed its Router. The Router 3.0 version …

Read More
Angular 2 router.navigate

I'm trying to navigate to a route in Angular 2 with a mix of route and query parameters. Here is an example route where the route is the last part of the path: { path: ':foo/:bar/:baz/page', component: AComponent } …

Read More
Angular 2 How to redirect to 404 or other path if the path does not exist

I was trying to redirect 404 / other path if the path does not exist in angular 2 I tried research there is some method for angular 1 but not angular 2. Here is my code : @RouteConfig([ { path: '/news', name: 'HackerList', component: HackerListComponent, useAsDefault: …

Read More