How to pass a parameter to routerLink that is somewhere inside the URL?

Question

I know I can pass a parameter to routerLink for routes such as

/user/:id

by writing

[routerLink]="['/user', user.id]"

but what about routes such as this one:

/user/:id/details

Is there a way to set this parameter or should I consider a different URL scheme?

The array of URL fragments consists of all parts of the route you want to redirect to. We have to keep the same fragments order as in the route definition. More details about this and how to redirect using Router or RouterLink directive here: https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink#comment130056069_37880876 — Maciej Wojcik, Sep 08 '22 at 12:52

score 451 · Accepted Answer · edited Feb 22 '18 at 11:25

451

In your particular example you'd do the following routerLink:

[routerLink]="['user', user.id, 'details']"

To do so in a controller, you can inject Router and use:

router.navigate(['user', user.id, 'details']);

More info in the Angular docs Link Parameters Array section of Routing & Navigation

edited Feb 22 '18 at 11:25

DJDaveMark

2,669
23
35

answered Jun 27 '16 at 20:44

Wojciech Kwiatek

6,634
2
16
26

can you provide any link where I can find more information about this.. – refactor Dec 24 '16 at 18:17
4

@CleanCrispCode You can read more about it in the Angular docs at router guide: https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array – Wojciech Kwiatek Dec 28 '16 at 08:13
What about the `` syntax ? – Stephane Apr 04 '19 at 09:23

score 65 · Answer 2 · edited Aug 16 '18 at 19:33

65

Maybe it is really late answer but if you want to navigate another page with param you can,

[routerLink]="['/user', user.id, 'details']"

also you shouldn't forget about routing config like ,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']

edited Aug 16 '18 at 19:33

michael shiko

3
2

answered Apr 24 '18 at 06:49

Rıdvan

720
7
11

score 23 · Answer 3 · answered May 20 '19 at 06:35

First configure in table:

const routes: Routes = [  
{
  path: 'class/:id/enrollment/:guid',
  component: ClassEnrollmentComponent
 }
];

now in type script code:

this.router.navigate([`class/${classId}/enrollment/${4545455}`]);

receive params in another component

 this.activatedRoute.params.subscribe(params => {
  let id = params['id'];
  let guid = params['guid'];

  console.log(`${id},${guid}`);
  });

score 10 · Answer 4 · answered May 27 '21 at 20:28

10

It's very simple

<a routerLink="/user/{{id}}/details"></a>

answered May 27 '21 at 20:28

Avtandil Kavrelishvili

1,651
3
27
37

1

Works perfect, thanks a lot! – Torben Nov 15 '21 at 18:24
@Torben You are welcome – Avtandil Kavrelishvili Nov 16 '21 at 20:58

score 7 · Answer 5 · answered Jun 05 '20 at 14:00

There are multiple ways of achieving this.

Through [routerLink] directive
The navigate(Array) method of the Router class
The navigateByUrl(string) method which takes a string and returns a promise

The routerLink attribute requires you to import the routingModule into the feature module in case you lazy loaded the feature module or just import the app-routing-module if it is not automatically added to the AppModule imports array.

RouterLink

<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component

Navigate

// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})

NavigateByUrl

this._router.navigateByUrl(urlString).then((bool) => {}).catch()

score 2 · Answer 6 · answered Jul 18 '20 at 21:20

2

constructor(private activatedRoute: ActivatedRoute) {

this.activatedRoute.queryParams.subscribe(params => {
  console.log(params['type'])
  });  }

This works for me!

answered Jul 18 '20 at 21:20

Pedro Europeu

29
2

in the case you would use this.activatedRoute.parmas.subscribe(params => { console.log(params['type']) }); } so params instead of query paramas to get the parameter from the url – Dyary Apr 05 '21 at 21:03
1

This doesn't answer the question. You're not using routerLink to create a link here. You're just parsing queryParams if there are any ... – AlxVallejo Feb 12 '23 at 18:32

score 1 · Answer 7 · answered Nov 06 '20 at 21:08

app-routing.module.ts

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'product/:id', component: ProductDetailsComponent },
  { path: '', redirectTo: '/products', pathMatch: 'full' },
];

In controller you can navigate like this,

this.router.navigate(['/products', productId]);

It will land you to path like this: http://localhost:4200/products/product-id

Ref

score 0 · Answer 8 · edited Oct 14 '21 at 11:18

0

constructor(private activatedRoute: ActivatedRoute) {}

in the case you would use

`this.activatedRoute.parmas.subscribe(params => { console.log(params['type']) }); }`

so params instead of queryparamas to get the parameter from the url –

edited Oct 14 '21 at 11:18

Amit Soni

3,216
6
31
50

answered Apr 05 '21 at 21:04

Dyary

753
7
14

score 0 · Answer 9 · answered Apr 29 '22 at 15:37

You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

How to pass a parameter to routerLink that is somewhere inside the URL?

9 Answers9

Linked

Related