How to set query parameters to url Angular2?

angular query-parameters
amit_chauhan picture amit_chauhan · Aug 31, 2016 · Viewed 25.9k times · Source

I have a requirement to set a url with query parameters like /Questions?id=1234&pageid=0. I have tried to do it via router.Navigate['/Questions?id=1234&pageid=0'] but no luck.

After navigation browser shows like /Questions%3Fid%3D1234%26pageid%3D0.

I have also tried it with setting routerLink="/Questions?id=1234&pageid=0", but same result.

Please suggest any solution to do it.I am using rc5 for angular2.

Answer

Pstr picture Pstr · Nov 22, 2016

You can pass them as item in the router, but outside the commands array:

[routerLink]="["/Questions"], {queryParams: {id:1234, pageid:0}}"

this generates what you want: /Questions?id=1234&pageid=0

Or you can use it programmaticaly:

this.router.navigate(['/Questions'], { queryParams: {id:1234, pageid:0} })

with router being an instance of @angular/router's Router

Related questions

Angular: How to update queryParams without changing route

I am trying to update (add, remove) queryParams from a component. In angularJS, it used to be possible thanks to : $location.search('f', 'filters[]'); // setter $location.search()['filters[]']; // getter I have an app with a list that the …

Read More
Angular: append query parameters to URL

Im using this: import { HttpParams } from '@angular/common/http'; let params = new HttpParams(); params.append('newOrdNum','123'); But this is not working, i dont append param in url. Any suggestion?

Read More
Angular 4 - Route query params cause path match failure

After searching multiple threads/questions on the various types of routing within Angular 4, I cannot resolve an issue linked to passing queryParams to an Angular 4 route. When passing either into the url http://localhost/search;x=y through the template […

Read More