Links in strings - Typescript

Question

I'm working at a project written in Ionic/Angular/Typescript. In the .html file, I have

< p> {{stringVar}} </p>

In the .ts file,I have

this.stringVar= "Visit http://www.google.com. 
                 Visit http://www.stackoverflow.com."

I have 2 questions:

1) I want the 2 sentences in the string to be displayed in html on different lines. What should I do in order to achieve this: add \n or or something like this?

2) I want the 2 links in the string to appear as links in html,too. That is,when the user clicks on them,he will be taken to those sites.

Thanks in advance!

if that's the way you have the URLs stored you'll have to chop up the string yourself. — toskv, Jul 10 '16 at 19:21

lmcarreiro · Answer 1 · 2016-07-11T00:04:25.413

3

1) To appear in different lines, you must put each one inside their own  tag, like this:

<p>first line</p>
<p>second line</p>

2) To appear as clickable links, you need to put in <a> tags, with url in href attribute, like this:

<p>click <a href="http://www.google.com/">here</a> to visit google.</p>

It would be better if you could change the structure of your data, to something like this:

<p ng-repeat="url in urlList">Visit <a href="url">{{url}}</a></p>

this.urlList = [
    "http://www.google.com",
    "http://www.stackoverflow.com"
];

or even better:

<p ng-repeat="site in siteList">Visit <a href="site.url">{{site.name}}</a></p>

this.siteList= [
    { name: "Google", url: "http://www.google.com" },
    { name: "StackOverflow", url: "http://www.stackoverflow.com" }
];

edited Jul 11 '16 at 00:04

answered Jul 10 '16 at 23:59

lmcarreiro

5,312
7
36
63

I understand,but mine was just an example. In fact,I have an array of strings. Some of them contain links,some don't. And there isn't any pattern like the one I presented earlier "Visit...". It's just links contained within some of the strings. – flaviumanica Jul 11 '16 at 07:35
This is a more complex problem, there are other questions about it, look at this one: http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links – lmcarreiro Jul 11 '16 at 15:34

score 0 · Answer 2 · answered Jul 11 '16 at 06:57

The best approach to go with a 'list', rather than a stringVar

this.linkList = [
    "http://www.google.com",
    "http://www.stackoverflow.com"
];

1) I would suggest to have  instead of   in between.

2) The following is a working sample with Angular2

<p *ngFor="let link of linkList">Visit <a href="{{link}}">{{link}}</a></p>

Check the working sample here : https://embed.plnkr.co/Om3CXpT9xN07YCz2aHQr/

score 0 · Answer 3 · answered Jul 11 '16 at 07:39

Both Question has one answer you Basically want to Interpolate string with html in the angular, although i am not expert in angular1.x but yes there is one service used for the same called as

 $interpolate(templateString)(you_.ts/js_code);

by using this you can show your string as it as on the webpage event using html in you javascript file too. you just have to pass the html in your string ans display it in the webpage

for example lets assume your use case you simple have to add this like :-

this.stringVar= "Visit <a href='http://www.google.com'>Google</a> Here and<br> Visit <a href='http://www.stackoverflow.com'>Stackoverflow</a> Here."

and than convert this using interpolate like this

$scope.your_string = $interpolate(templateString)(stringVar);

Working Example for the same

Links in strings - Typescript

3 Answers3