How to bind <a href>template in angular 2 dynamically?

Question

Please find the below code

Component.ts

getReply():string{if(condition){
return "The link is: <a href = 'https://www.google.com'>Google</a>";
}

I am binding the above in front end using [innerHtml], using which the above code gets binded and displaying the link, on click which directs to google site.

Whereas, when I try making it dynamically, the link is displayed but not directing to google site.Please find below the way I have tried,

Component.ts

export class ReplyComponent{
link : string;
    getReply():string{if(condition){
    this.link = "https://www.google.com";
        return "The link is: <a href = 'this.link'>Google</a>";
        }
}

On trying this, I am able to get the link, but it is not redirecting to google site. Please correct me if I am doing it wrong.

Answer 1

There is a problem in your syntax. The return statement is all string.

return "The link is: <a href = 'this.link'>Google</a>";

Here the return statement will return it as a string. To acheive the dynamism change your return value as follows:

return "The link is: <a href = "+this.link+">Google</a>";

so that this.link is treated as variable and not as string.