325

I want to pass a query parameter prop=xxx.

This didn't work

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
  Somewhere
</a>
BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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
  • 2
    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
  • 2
    queryParams can be added using a separate input field in the routerLink directive. You can check for more details on how to use routerLink in my guide: https://indepth.dev/tutorials/angular/indepth-guide-to-passing-parameters-via-routing – Maciej Wojcik Sep 08 '22 at 12:47

4 Answers4

617

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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
  • @rickul, unfortunately angular does not (yet?) provide any way to support objects in the queryParams's value. I opened [a feature request](https://github.com/angular/angular/issues/47307) to raise this limitation. Please consider voting the ticket so that they move it to their consideration list. – Flavien Volken Sep 06 '22 at 06:13
53
<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

Vivek Kumar
  • 2,625
  • 2
  • 25
  • 33
13

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
BraveNewMath
  • 8,090
  • 5
  • 46
  • 51
7

You can check out this as well.

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

>
 link name

 </router-link
>
Simas Joneliunas
  • 2,890
  • 20
  • 28
  • 35
Muyingo Steven
  • 101
  • 1
  • 6