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

Solution 1

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>

Solution 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]);

}

Comments

[Force444]

Doing it this way, routerLinkActive gets lost. Gunters answer is the correct way to do it.

[rmcsharry]

This is useful it you want to open a link to some other place outside of your Angular app.

[OPV]

How to use routerLinkActive in this case?