Links in strings - Typescript - angularjs

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 < br> 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!

Answer 1

1) To appear in different lines, you must put each one inside their own <p> 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 here 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 {{url}}</p>
this.urlList = [
"http://www.google.com",
"http://www.stackoverflow.com"
];
or even better:
<p ng-repeat="site in siteList">Visit {{site.name}}</p>
this.siteList= [
{ name: "Google", url: "http://www.google.com" },
{ name: "StackOverflow", url: "http://www.stackoverflow.com" }
];

Answer 2

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 <p></p> instead of <br/> in between.
2) The following is a working sample with Angular2
<p *ngFor="let link of linkList">Visit {{link}}</p>
Check the working sample here : https://embed.plnkr.co/Om3CXpT9xN07YCz2aHQr/

Answer 3

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