I want to pass a query parameter prop=xxx
.
This didn't work
<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
Somewhere
</a>
I want to pass a query parameter prop=xxx
.
This didn't work
<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
Somewhere
</a>
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
runGuardsAndResolvers: 'always'
will reload the route medium.com/engineering-on-the-incline/…
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'
.
Aug 23, 2021 at 12:19
<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
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
You can check out this as well.
<router-link
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"
>
link name
</router-link
>
<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/…