279

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?

1
  • 2
    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: stackoverflow.com/questions/37880876/… Commented Sep 8, 2022 at 12:52

9 Answers 9

463

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

3
  • can you provide any link where I can find more information about this..
    – refactor
    Commented Dec 24, 2016 at 18:17
  • 4
    @CleanCrispCode You can read more about it in the Angular docs at router guide: angular.io/docs/ts/latest/guide/… Commented Dec 28, 2016 at 8:13
  • 1
    What about the <button mat-button routerLink="...">View user</button> syntax ?
    – Stephane
    Commented Apr 4, 2019 at 9:23
67

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']
25

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}`);
  });
13

It's very simple

<a routerLink="/user/{{id}}/details"></a>
2
  • 1
    Works perfect, thanks a lot!
    – Torben
    Commented Nov 15, 2021 at 18:24
  • @Torben You are welcome Commented Nov 16, 2021 at 20:58
9

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()
2
constructor(private activatedRoute: ActivatedRoute) {

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

This works for me!

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
    Commented Apr 5, 2021 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
    Commented Feb 12, 2023 at 18:32
1

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

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 –

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.