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>

Answer 1

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

Answer 2

This is what i did, it works fine.

http://yourdomain.com/user?id=121

<a [routerLink]="['/user']" [queryParams]="{id:'121' }">User Profile</a>