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
– toskv, Commented Jul 10, 2016 at 19:21

lmcarreiro · Accepted Answer · 2016-07-11 00:04:25Z

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, 2016 at 0:04

answered Jul 10, 2016 at 23:59

lmcarreiro

5,8248 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flaviumanica Over a year ago

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.

lmcarreiro Over a year ago

This is a more complex problem, there are other questions about it, look at this one: stackoverflow.com/questions/37684/…

Bala · Accepted Answer · 2016-07-11 06:57:21Z

0

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/

answered Jul 11, 2016 at 6:57

Bala

51210 silver badges16 bronze badges

Comments

Pardeep Jain · Accepted Answer · 2016-07-11 07:39:29Z

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

Collectives™ on Stack Overflow

Links in strings - Typescript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related