RouterLink with multiple params in Angular

Question

I want to create a link to the route with multiple parameters and bind them in tempalte. Until now, I've been doing this by executing the function on (click) event, but I was wondering if it's possible within RouterLink's binding.

Here is the function I use to bind parameters:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

My route looks like:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

Will I be able to do the same inside routerLink directive?

Pankaj Parkar · Accepted Answer · 2016-09-22T18:39:49.647

47

Yes, of-course, you could use routerLink to form href tag dynamically for navigation. Values in array where each value will get evaluated against Component context.

[routerLink]="['/category', category, page ]"

edited Sep 22 '16 at 18:39

answered Sep 22 '16 at 18:33

Pankaj Parkar

134,766
23
234
299

1

Haha, I was actually thinking what I've done wrong until you edited. Thank you, it's working. I don't know why I couldn't find it in documentation. I was trying to do that same as you in the first answer and it created: href="/category;cat=1;page=1". – Dawid Zbiński Sep 22 '16 at 18:39
1

@DawidZbiński that was my bad. :D it will form `;` separated string which is wiered.. – Pankaj Parkar Sep 22 '16 at 18:40
1

Nevermind, at the end everything works perfect. Thanks once again. – Dawid Zbiński Sep 22 '16 at 18:49
1

@DannyFardyJhonstonBermúdez glad to know it helps :) – Pankaj Parkar Oct 31 '18 at 15:11

score -5 · Answer 2 · answered Oct 26 '17 at 09:56

-5

you can do it like, for example :-

<p *ngFor="let emp of employees; let i = index">
  <li><a [routerLink]="['delete', i]">{{emp.name}}</a>({{emp.status}})</li>
</p>

Hope it helps,

Thanks

answered Oct 26 '17 at 09:56

Alok Kamboj

1,017
11
12

I, unfortunately, think that this answer is not answering the question at all. There's no multiple params in router link you showed. – Dawid Zbiński Jul 27 '18 at 22:47
index i is dynamic for every employee which makes every delete url dynamic – Alok Kamboj Sep 20 '18 at 18:46

RouterLink with multiple params in Angular

2 Answers2