355

I want to pass a query parameter prop=xxx.

This didn't work

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
  Somewhere
</a>
Improve this question
4
  • The syntax that you want to use is for matrix parameters and this is the form <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, 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 stackoverflow.com/questions/35688084/… and here stackoverflow.com/questions/2048121/… Commented Mar 23, 2017 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. Commented Mar 23, 2017 at 18:32
  • Have some more differences check this web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Also you can check the link parameter syntax in the angular doc here angular.io/docs/ts/latest/guide/… Commented Mar 23, 2017 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: indepth.dev/tutorials/angular/… Commented Sep 8, 2022 at 12:47

4 Answers 4

Reset to default
677

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

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

7 Comments

How would this work programmatically? I tried with this.router.navigate( ['/resetPassword', { queryParams: { username: loginName }}]); But the result was: localhost:8100/resetPassword;queryParams=%5Bobject%20Object%5D
I updated my answer. See also the link I added. It shows a full example.
Don't forget to subscribe to the queryParams on the target: stackoverflow.com/a/39146396/2726844
Or if you're using routes, runGuardsAndResolvers: 'always' will reload the route medium.com/engineering-on-the-incline/…
Don't forget to use routerLink instead href on the link. Command <a href="..." [queryParams]="..."> will fail with Can't bind to 'queryParams' since it isn't a known property of 'a'.
|
61 
<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

Improve this answer

Comments

19

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
Improve this answer

1 Comment

What if we have a value in component
7

You can check out this as well.

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

>
 link name

 </router-link
>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.