How to pass query parameters with a routerLink

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 extrasthis.router.navigate(['/login'], navigationExtras);

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

<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

You can check out this as well.

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