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?

Anneal

Answer 1

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 ]"

Girovard

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". – Silici

@DawidZbiński that was my bad. :D it will form ; separated string which is wiered.. – Girovard

Nevermind, at the end everything works perfect. Thanks once again. – Silici

@DannyFardyJhonstonBermúdez glad to know it helps :) – Girovard

Answer 2

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

Epley

I, unfortunately, think that this answer is not answering the question at all. There's no multiple params in router link you showed. – Silici

index i is dynamic for every employee which makes every delete url dynamic – Epley