Angular 2: Generate the route link using functions/ Dynamically generate the routerLink

Question

I want to create a route link dynamically.

I have the html loaded with the page however, i need to use an id in the URL which is available much later.

HTML :

<a href="javascript:void(0)" routerLink="cartoonBoxUrl()" routerLinkActive="active">Add Content to Cartoon Box</a>

The link in this routelink contains the id of the cartoon box(/carton-box/1). This id is available after the page loads. Therefore i need a way to create a route link to include this id.

So i believe we can do something like : routerLink="'cartoon-box/' + id" but i was hoping to link routerlink to a component function

Please add the code that demonstrates what you try to accomplish, what you tried and where you failed. — Günter Zöchbauer, Nov 11 '16 at 09:33
So what's the problem? You can use methods in template expressions just fine. — Günter Zöchbauer, Nov 11 '16 at 09:39
@GünterZöchbauer I caant seem to attach a function to routerLink. Is code correct ? — Bhumi Singhal, Nov 11 '16 at 09:40
its 3 years later but what was the content of your function cartoonBoxByURL()? Or how does it return its value? I am doing same thing but it adds () so my links end up becoming cartoon/(1) instead of cartoon/1? — Nie Selam, Apr 23 '19 at 10:19

score 12 · Accepted Answer · answered Nov 11 '16 at 09:42

12

Without [] Angular doesn't evaluate the expression and just uses cartoonBoxUrl() as literal string.

<a href="javascript:void(0)" [routerLink]="cartoonBoxUrl()" routerLinkActive="active">Add Content to Cartoon Box</a>

answered Nov 11 '16 at 09:42

Günter Zöchbauer

623,577
216
2,003
1,567

score 2 · Answer 2 · answered Nov 11 '16 at 14:00

2

<a href="javascript:void(0)" (click)=cartoonBoxUrl()>Add Content to Cartoon Box</a>

in your ts component.ts file do

import {Router} from "@angular/router";
public ID: any;
constructor(private router: Router){}
cartoonBoxUrl(){
 this.ID = Your LinkId;
 this.router.navigate(['YourRouteLink/', this.ID]);

}

answered Nov 11 '16 at 14:00

Manish

170
1
7

Doing it this way, routerLinkActive gets lost. Gunters answer is the correct way to do it. – Force444 Dec 08 '17 at 14:20
This is useful it you want to open a link to some other place outside of your Angular app. – rmcsharry Jan 28 '18 at 22:56
How to use `routerLinkActive` in this case? – POV Jul 20 '18 at 11:55

Angular 2: Generate the route link using functions/ Dynamically generate the routerLink

2 Answers2

Linked