How to pass query parameters with a routerLink

Question

I want to pass a query parameter prop=xxx.

This didn't work

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
  Somewhere
</a>

The syntax that you want to use is for matrix parameters and this is the form `Somewhere`, this gives you a matrix url parameters (semicolon ; instead of ? and & separators) and you can access this by ActivatedRoute.params instead activatedRoute.queryParams More information here http://stackoverflow.com/questions/35688084/how-get-query-params-from-url-in-angular2 and here http://stackoverflow.com/questions/2048121/url-matrix-parameters-vs-request-parameters — William Ardila, Mar 23 '17 at 18:30
Query parameters and matrix parameters are the same. The only difference is when they are added to the root segment, they are serialized as query parameters, when they are added to a child segment, they are serialized as matrix parameters. — Günter Zöchbauer, Mar 23 '17 at 18:32
Have some more differences check this http://web.archive.org/web/20130126100355/http://brettdargan.com/blog/2009/01/16/query-vs-matrix-params Also you can check the link parameter syntax in the angular doc here https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array — William Ardila, Mar 23 '17 at 18:43

Günter Zöchbauer · Accepted Answer · 2017-08-02T13:10:42.310

533

queryParams

queryParams is another input of routerLink where they can be passed like

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

To also get routes active class set on parent routes:

[routerLinkActiveOptions]="{ exact: false }"

To pass query parameters to this.router.navigate(...) use

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

See also https://angular.io/guide/router#query-parameters-and-fragments

edited Aug 02 '17 at 13:10

answered Jun 17 '16 at 11:51

Günter Zöchbauer

558,509
191
1,911
1,506

How would this work programmatically? I tried with this.router.navigate( ['/resetPassword', { queryParams: { username: loginName }}]); But the result was: http://localhost:8100/resetPassword;queryParams=%5Bobject%20Object%5D – rickul Aug 02 '17 at 12:50
2

I updated my answer. See also the link I added. It shows a full example. – Günter Zöchbauer Aug 02 '17 at 13:02
Couple notes: rickul's code should be `[ '/resetPassword' ], { queryParams: { username: loginName }})` where the `]` comes before the extras. Also don't forget that query params are case sensitive. – Simon_Weaver Mar 03 '19 at 10:52
2

Don't forget to subscribe to the queryParams on the target: https://stackoverflow.com/a/39146396/2726844 – Vince I Mar 21 '19 at 15:12
1

Or if you're using routes, `runGuardsAndResolvers: 'always'` will reload the route https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2 – Adam Dec 01 '19 at 13:27
1

Don't forget to use `routerLink` instead `href` on the link. Command `` will fail with `Can't bind to 'queryParams' since it isn't a known property of 'a'`. – Elias Strehle Aug 23 '21 at 12:19

score 37 · Answer 2 · answered Feb 04 '21 at 07:38

<a [routerLink]="['../']" [queryParams]="{name: 'ferret'}" [fragment]="nose">Ferret Nose</a>

foo://example.com:8042/over/there?name=ferret#nose
\_/   \______________/\_________/ \_________/ \__/
 |           |            |            |        |
scheme    authority      path        query   fragment

For more info - https://angular.io/guide/router#query-parameters-and-fragments

score 5 · Answer 3 · answered Sep 22 '21 at 20:26

5

For those who want to pass dynamic querystring params, this worked for me:

assume you have component model

x = {name:'xyz'}

html:

<a [routerLink]="['../']" [queryParams]="{prop: x.name}">Somewhere</a>

this will generate link:

../?prop=xyz

answered Sep 22 '21 at 20:26

BraveNewMath

7,592
5
43
49

What if we have a value in component – David Jackson Apr 07 '22 at 18:59

score 3 · Answer 4 · edited Apr 21 '21 at 02:31

3

You can check out this as well.

 <router-link
 
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"

>
 link name

 </router-link
>

edited Apr 21 '21 at 02:31

Simas Joneliunas

2,705
15
25
32

answered Apr 20 '21 at 12:46

Muyingo Steven

61
6

How to pass query parameters with a routerLink

4 Answers4

Linked