Angular displaying the as HYPERLINK from the response as string in HTML

Question

I have an api which gives me a string and I have to show the response on my HTML file, but after a lot of research I'm unable to figure out what to do.

The problem is that in the response the string has some <a>XYZ</a> tag in it and I need to show XYZ as the hyperlink. Right now the data is coming like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="www.google.com">Google</a>

As you can see the response, the full Google is coming on the page without the hyperlink simply the text from the response where I want to display the Google only and also with the hyperlink.

EDITS

HTML

<p *ngIf="value && string">
  {{string.getString(value)}}
</p>

And I have tried doing with the this also

<p *ngIf="value && string">
  [innerHtml]="string.getString(value)"
</p>

It printed the same text in the webpage and moreover it didn't get any data

String is a service which I'm using to and getString() is method in it.

String Service

export class StringService {

 string : any

 constructor(private http : HttpClient) {
    this.http.get("/strings").subscribe(data => {
       this.strings = data['strings']
    })
 }

 getString(key : string){
   if(key == "WEB_ABOUT_US")
      return this.strings.WEB_ABOUT_US;
   else if(key == "WEB_CLASSES_TITLE")
      return this.strings.WEB_CLASSES_TITLE;

   return null  
 }

}

The response from the api :

{
   "strings": {
      "WEB_ABOUT_US": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href=\"www.google.co.in\">Google</a> Sed tellus justo, euismod non sodales eget, faucibus accumsan odio. Nunc quis venenatis dui. Vestibulum ut nunc nec augue imperdiet lobortis vitae eget ex. Curabitur ut elit et lacus euismod fringilla. Vivamus interdum massa quis sollicitudin ornare. Sed sed urna id diam sollicitudin tempus vel in elit. Duis malesuada massa et purus imperdiet, ac varius nulla volutpat. In feugiat quis sapien et tempus."
    }
}

What I have done so far is I went to this : How to make clickable URL's in JSON response from REST using AngularJS?

Read about Autolinker but it is not the thing which I'm looking for. Kindly help to achieve this in angular form. If any question comes up I'm here to explain. Thanks

SOLVED

Thanks to all of you who gave their time and then helped me out but special thanks to @PierreDuc PierreDuc for the help which did the magic. So the thing which I had to do I was not working on it correctly.

<p [innerHTML]="string.getString('WEB_ABOUT_US')"></p>

and it worked. Thanks Again!!

Please go read [ask]. You need to show us _how_ you are inserting this content into your document first of all. — CBroe, Feb 26 '18 at 12:09
You're probably using string interpolation `{{value}}`, and you should use `[innerHTML]` binding like `[innerHtml]="value"` — Poul Kruijt, Feb 26 '18 at 12:09
are you setting the text to that? you need to set the innerHTML to the `` — mast3rd3mon, Feb 26 '18 at 12:09
@CBroe The reason why I asked like this is because I'm getting the response all I need to do is to get the response in that format. That's it. But I'll do it as asked. — Alok, Feb 26 '18 at 12:10
@PierreDuc I have tried using this in my code like this `[innerHtml]="value"` but it printed the same thing on my page nothing like I wanted : [innerHtml]="string.getString(value)" like this on my page, now no data is coming up — Alok, Feb 26 '18 at 12:14
@PierreDuc both will display the returned data as text, the innerHTML needs to be set for it to work as expected — mast3rd3mon, Feb 26 '18 at 12:15
well youre telling the app to use the string form of whatever you're being sent — mast3rd3mon, Feb 26 '18 at 12:24
@mast3rd3mon isn't that the same as I said, or is there a difference between `innerHtml` and `innerHTML` that I don't know about :)? — Poul Kruijt, Feb 26 '18 at 12:27
@PierreDuc 1st, you edited that comment after i posted mine. 2nd, you have to do it from the code, you cant in the html — mast3rd3mon, Feb 26 '18 at 12:28
@mast3rd3mon pretty sure you misread though, because I didn't edit anything, which reflects in the OP's response to my comment, and how can you not bind a property which contains html inside the template? — Poul Kruijt, Feb 26 '18 at 12:31
@PierreDuc you did edit, i can see the edit marker. the innerHTML is set from getting the element within js/ts code — mast3rd3mon, Feb 26 '18 at 12:33
@mast3rd3mon yes, I changed 'You probably' to 'You're probably' 20 seconds after I posted it. I figured proper English would be better, but if that changed how you perceived and interpreted the comment, then I'm sorry. Looks like you were so confused by that change, it took you 7 minutes to write the comment :) — Poul Kruijt, Feb 26 '18 at 12:39
@mast3rd3mon I have done this in my ts file like `[innerHTML]=this.string.getString(this.value)` but I got this error `Cannot find name ' innerHTML'.` Pardon me for that, but could you please show it in the form of code, so that I could also learn something new? — Alok, Feb 26 '18 at 12:45
you have to get the element reference, and set the innerHTML of the element — mast3rd3mon, Feb 26 '18 at 12:49
Possible duplicate of [innerHTML is not working for some tags like button or custom tags](https://stackoverflow.com/questions/48879407/innerhtml-is-not-working-for-some-tags-like-button-or-custom-tags) — Akshay Garg, Feb 26 '18 at 12:49

score 1 · Accepted Answer · answered Feb 26 '18 at 12:47

1

You can use it- By default Angular is sanitizing potential unsafe content

 import { DomSanitizer } from '@angular/platform-browser';

 html: any;

  constructor(private domSanitizer: DomSanitizer) {
    this.html = domSanitizer.bypassSecurityTrustHtml('<b>Test</b> <a href="google.com" >My Test</a>');
  }

StackBlitz example-

See also https://stackblitz.com/edit/angular-4cijzw

answered Feb 26 '18 at 12:47

Akshay Garg

1,010
8
15

So, it was a quiet correct somehow, but when I pass the value in the `bypassSecurityTrustHtml(string.getString("WEB_ABOUT_US"))`, it is not actually working on it at all probably it should work. Throwing a lot of errors. It only works when you just provide it like `bypassSecurityTrustHtml('Test My Test')` – Alok Feb 26 '18 at 13:03
1

Look at this link https://stackblitz.com/edit/angular-4cijzw, Here I have dummy data. It's working fine. – Akshay Garg Feb 26 '18 at 13:39

Angular displaying the as HYPERLINK from the response as string in HTML

1 Answers1