how to pass route params in [routerLink] angular 2

Question

I'm trying to create an application with angular 2,And Want pass params to tag a in [routerLink],i want craete a link like this :

<a href="/auth/signup?cell=1654654654"></a>

i dont know how to pass cell in template...

Possible duplicate of [Angular2 Routerlink: add query paramters](http://stackoverflow.com/questions/35226245/angular2-routerlink-add-query-paramters) — Dov Benyomin Sohacheski, May 29 '16 at 07:02

score 13 · Answer 1 · answered Nov 09 '16 at 05:48

You can work with queryParams which works with routerLink to build the url. For ex:

<a [routerLink]="['/profiles']" 
[queryParams]="{min:45,max:50,location:29293}">
  Search
</a>

This will build a route like http://localhost:3000/profiles?min=45&max=50&location=29923

Good Luck.

Pardeep Jain · Accepted Answer · 2016-05-29T07:27:06.343

10

If your are going to use angula2 beta then you have to send parameter like this while doing routing.

<a [routerLink]="['signup',{cell:cellValue}]">Routing with parameter</a>                        
<input type='text' [(ngModel)]='cellValue'>

and than in the receiving side than you have to get parameter via using RouteParams.

nut if You are going to use angular2 RC than you have to use RouteSegment instead of using RouteParams in angular2 RC. like this :-

import { Component } from '@angular/core';

import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'about-item',
  template: `<h3>About Item Id: {{id}}</h3>`,
  Directives: [ROUTER_DIRECTIVES]
})

class AboutItemComponent { 

  id: any;

  constructor(routeSegment: RouteSegment) {
    this.id = routeSegment.getParam('id');    
  }
}

@Component({

    selector: 'app-about',

    template: `

      <h2>About</h2>
        <a [routerLink]="['/about/item', 1]">Item 1</a>
        <a [routerLink]="['/about/item', 2]">Item 2</a>
      <div class="inner-outlet">
        <router-outlet></router-outlet>
      </div>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

  { path: '/item/:id', component: AboutItemComponent }

])

export class AboutComponent { }

edited May 29 '16 at 07:27

answered May 29 '16 at 06:57

Pardeep Jain

84,110
37
165
215

i dont want use this way but its ok and how to bind this?i want when type on input cell params bind in a tag. – May 29 '16 at 07:05
than just bind your input field value to `[(ngModel)]` and than pass that variable as routerParameter. @AlirezaValizade see my updated answer. – Pardeep Jain May 29 '16 at 07:25
`

تلفن همراه

` i use FormBuilder and not working – May 29 '16 at 07:33
try this one `

تلفن همراه

` – Pardeep Jain May 29 '16 at 07:35
1

your example url will show like: `auth/signup/1654654654` not `auth/signup?cell=1654654654` because you used `/item/:id` in your path – Shaishab Roy May 29 '16 at 07:37
hmm you are right @shaishabroy , its depends upon us how want to display url. – Pardeep Jain May 29 '16 at 07:40

score 2 · Answer 3 · answered May 29 '16 at 06:56

2

you can try the code below: Your ts file will be like this:

@Component({ ... })
@Routes([
    {
        path: '/auth/signup?cell=1654654654', component: AuthComponent
    }
])
export class AppComponent  implements OnInit {
    constructor(private router: Router) {}
}

And in you html file,

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>

answered May 29 '16 at 06:56

Tarang Bhalodia

1,185
11
21

You can bind using [(ngModel)] and use routeParams – Tarang Bhalodia May 31 '16 at 13:49

score 2 · Answer 4 · answered May 29 '16 at 07:25

2

In Angular2 supports both query parameters and path variables within routing.

use like:

<a [routerLink]="['Signup', {cell: '1654654654'}]">Signup</a>

and in component:

@RouteConfig([
    new Route({ path: '/auth/signup', component: SignupComponent, name: 'Signup'})
])

then shown in url like that you want /auth/signup?cell=1654654654

NB:

If in your path contain cell in component as params like: /auth/signup/:cell and routelink like: [routerLink]="['Signup', {cell: '1654654654'}]" then url will show like: auth/signup/1654654654

answered May 29 '16 at 07:25

Shaishab Roy

16,335
7
50
68

already mentioned all your answer's content in existed answers nothing new added to answer. – Pardeep Jain May 29 '16 at 07:28
In which answer ?@PardeepJain – Shaishab Roy May 29 '16 at 07:32
see my answer @Shaileshab – Pardeep Jain May 29 '16 at 07:33
which answer mentioned when url shown like `auth/signup/1654654654` and when `auth/signup?cell=1654654654`. you mentioned? @PardeepJain – Shaishab Roy May 29 '16 at 07:36
the question is not about how url is being shown, the question is about how to pass parameter is't it ? – Pardeep Jain May 29 '16 at 07:38
also mentioned he want like: `/auth/signup?cell=1654654654` right? – Shaishab Roy May 29 '16 at 07:42
but as question header suggest us `how to pass route params in [routerLink] angular 2` i think so – Pardeep Jain May 29 '16 at 07:44
ok I guess he want like that that's why I shown this process :) – Shaishab Roy May 29 '16 at 07:46
tnx for your answer.exactly i wanted this – May 31 '16 at 09:19
you are welcome and if it helped you can accept and vote up. :) @AlirezaValizade – Shaishab Roy May 31 '16 at 12:01

score 2 · Answer 5 · answered Jun 04 '17 at 10:51

The accepted answer is outdated and IMHO doesn't answer the question.

However the question is not clear: "route params" are in the path part of the URL but the question was about "query params" which are after the '?' (question mark).

So the answer to the question is in the answer of @Akash: you have to use

[queryParams]="{name: value}"

in the template.

So this anchor will reference to /path/with/myparam?cell=1654654654:

<a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]"
   [queryParams]="{cell: 1654654654}"
></a>

how to pass route params in [routerLink] angular 2

5 Answers5