Angular2 Routerlink: add query parameters [duplicate]

Question

How can I add query parameters to routerLink?

@RouteConfig {
   {path: '/search',   name: 'Search', component: SearchCmp}
}

Let' say I want to route to /search?q=asdf,

<a [routerLink]= " [ '/Search' , {q= 'asdf'}] ">Link 1</a>

this resolves to /search .

Is there a way to add query parameters without using:

this.router.navigate( ['Search', { q: 'asdf'}]);

or

<a href="/search?a=asdf"> Link 2 </a>

?

Yea, this is same question and answer as this: stackoverflow.com/questions/35188060/… — Vlado Tesanovic
– Vlado Tesanovic, Commented Feb 5, 2016 at 14:20
no it's not. i this question is about query parameters and not about route paramters — tisie
– tisie, Commented Feb 5, 2016 at 14:24
Please clarify. Do you want a generic way to add url params or are you looking for an Angular way? — Bryan
– Bryan, Commented Feb 5, 2016 at 14:25
im looking for an angular way. <a href="/search?a=asdf">Link></a> would trigger a page reload — tisie
– tisie, Commented Feb 5, 2016 at 14:28
Why do you need query parameters? You are handling the routes in Angular not queries. Your routes determine the queries so that means you need route parameters...? — inoabrian
– inoabrian, Commented Feb 5, 2016 at 14:50

Abhijeet Ahuja · Accepted Answer · 2017-09-14 05:58:32Z

111

If u need something as /search?q=asdf than you can simply use:

@RouteConfig {
   {path: '/search',   name: 'Search', component: SearchCmp}
}

//And to generate router Links use:

<a [routerLink]="['/Search']" [queryParams]="{q:'asdf'}"></a>

This will generate the href tag as <a href="/search" but on clicking the anchor tag will lead you to url /search?q=asdf. [queryParams] will let you add the query params with "?", otherwise they will be appended by ";". You can get this parameter in your SearchCmp using:

constructor(private _routeParams: RouteParams) {
   var queryParam = this._routeParams.get('q');
}

edited Sep 14, 2017 at 5:58

Abhijeet Ahuja

5,9906 gold badges45 silver badges55 bronze badges

answered Feb 7, 2016 at 13:45

Saurabh Maurya

1,6382 gold badges13 silver badges11 bronze badges

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

3 Comments

tisie Over a year ago

oh yes, that's it. thanks man! any chance to generate the href tag as /search?q="asdf" ?

Michael Oryl Over a year ago

This does not answer the original question. This does: stackoverflow.com/a/39016381/1480995

WaZaA Over a year ago

As @MichaelOryl says, this not answer the question and produce curious URL like "search;q=asdf"

RapPayne · Accepted Answer · 2016-11-03 18:18:12Z

98

OP (Original Poster) asked how to add query parameters via router link, not a router parameters as @SaUrAbH MaUrYa answered.

To add query parameters you need to use [queryParams] binding:

<a [routerLink]="['/users']" [queryParams]="{ page: 1 }">next page</a>

edited Nov 3, 2016 at 18:18

RapPayne

7,3103 gold badges54 silver badges95 bronze badges

answered Aug 18, 2016 at 10:54

pleerock

18.9k17 gold badges106 silver badges129 bronze badges

3 Comments

Sipke Schoorstra Over a year ago

This is exactly what I was looking for. The [queryParams] property binding is helpful when generating links dynamically, e.g. within a *ngFor loop: ``` <li *ngFor="let a of accounts"> <a [routerLink]="['/account']" [queryParams]="{ id: a.Id }">{{a.Name}}</a> </li> ``` I couldn't get this to work with the other construct as suggested by SaUrAbH MaUrYa (unless I needed a hardcoded query string value)

Ali Adravi Over a year ago

how to pass page number dynamically I try to use [queryParams]="{ page: {{myPageVariable}} }" and it is not working

Jens Alenius Over a year ago

[queryParams]="{ page: myPageVariable }"

Collectives™ on Stack Overflow

Angular2 Routerlink: add query parameters [duplicate]

2 Answers 2

3 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Linked

Related