How do I create link tag using interpolation in Angular 2 / Ionic 2

Question

I currently am making an app in Ionic 2/Angular 2, and have come across a hurdle I can't quite solve.

To give some insight, I'm getting a bunch of strings from a webservice, where some of the strings could look like this example:

"This is a string with a link: http://www.somelink.com"

I have set up a RegEx to find the link in the strings (if there are any) and convert them to an tag, as follows:

"This is a string with a link: 
<a href="the link from above">the link from above</a>"

I want to put this string with the tag into following html:

<ion-item-sliding *ngFor="let item of wishes">
    <div ion-item text-wrap style="user-select: text">
       {{item.wish}}
      </div>     
 </ion-item-sliding>

item.wish contains the "this is a string....." mentioned above, and I want it to actually create the link so it's clickable, but for some reason it displays the tag, instead of making it a link. I was expecting the interpolation to parse the HTML tag into a working link instead of just printing the entire tag.

UPDATE

In my ts file I have this:

urlify(text) {
    var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function (url) {
      return "<a href=\"" + url + "\">" + url + "</a>";
    })
  }

A basic method for making this:

"This is a string with a link: http://www.somelink.com"

into this:

 "This is a string with a link: 
    <a href="http://www.somelink.com">http://www.somelink.com</a>"

That string is then passed onto the HTML page, via the interpolation, shown above.

So the tag is created in the code, because it has to be dynamic creation of list items, so i cannot set the tag in the HTML. If I created the tag in the HTML like:

<a [href]="{{item.wish}}">somelink</a>

It would also make the text Next to the link ("This is a string with a link") into a link as well, which is not the intention, only the link should be clickable.

score 1 · Answer 1 · answered Apr 24 '17 at 13:22

1

<a [href]="item.wish">the link from above</a>"

answered Apr 24 '17 at 13:22

Günter Zöchbauer

623,577
216
2,003
1,567

1

Sadly that is not what I'm looking for, I'll provide some more code, to make the issue more clear, I'll update my initial question, just a sec – Banansnegl Apr 24 '17 at 13:39
See http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868. You can use `
` – Günter Zöchbauer Apr 24 '17 at 13:49
Thanks! That seems to have solved the problem. But brings up another question, I have a button on the item, to edit it, when I click it, it takes the wish "This is a string....." and puts it in an input field for edit, before the link worked, it just took the link as a string, but now it takes the tag with it, so when I pull it out of the list again, it'll have: "This is a string with a link: http://www.somelink.com" Is there a some method to convert it back from it's tag state, to a string like: "http://www.somelink.com" so it can be edited? – Banansnegl Apr 24 '17 at 14:20
Just change it in code and update `mySanitizedHtml`. – Günter Zöchbauer Apr 24 '17 at 14:21
Excuse my many questions, I am still quite new at Typescrip/javascript It might be really simple, but how do I turn: "This is a string with a link: http://www.somelink.com" into this again, so it can be edited: "This is a string with a link: http://www.somelink.com" '' I'm passing the before mentioned item, in that button click, but it comes with the tag – Banansnegl Apr 24 '17 at 14:48
Sorry, but I'm not able to understand what you try to accomplish. Where or how do you want to edit it? – Günter Zöchbauer Apr 24 '17 at 14:57
Okay so, the first thing you helped with, was to generate a list of wishes (a wish list) where some wishes could have links in them. Every item on the list has an edit button, where it passes the wish to an edit controller, where it's displayed in a text box for editing. With the help you provided, it now passes the wish WITH the tag, so the user will see: `"This is a string: somelink ` Where they should be seeing: `This is a string: http://www.somelink.com` How do i pass the item without tag, or remove the tag when it comes to the controller. – Banansnegl Apr 24 '17 at 15:02
I don't think I can help you. – Günter Zöchbauer Apr 24 '17 at 15:07
1

My apologies for vaguely explaining. I found a solution for the problem, so it works now. Thanks for the help, and for your time! – Banansnegl Apr 24 '17 at 15:13
Glad to hear. . – Günter Zöchbauer Apr 24 '17 at 15:14

How do I create link tag using interpolation in Angular 2 / Ionic 2

1 Answers1