1

We are trying to show HTML that comes from the database/server inside our Angular application using the [innerHTML] and SafeHtml approach.

Here is the flow...

  1. Data comes from the server into the component, inside the object there is a property that contains HTML.
  2. Inside the component, we take that HTML string, and create a SafeHtml property
  3. We want to display the SafeHtml in the UI inside a Bootstrap tooltip using the [title] property binding

creating safeHtml from server data

enter image description here

The problem is, inside the tooltip, it doesn't render the HTML tags, and shows "SafeValue must use [property]=binding:" message.

icon tooltip

We also tried to display the SafeHtml via [innerHTML] inside a div, and the html tags don't get rendered there either. We then created a hard-coded variable inside the component with the HTML, and it renders it with [innerHTML] without any issues.

inline variable with html for testing

safehtml div and inline html variable div

Can someone please help point out what I'm overlooking here?

Improve this question
1
  • Are you using ng-bootstrap? Commented Apr 2 at 17:05
Related questions
896
How to display HTML in TextView?
403
Angular 2 @ViewChild annotation returns undefined
1
How to render static html content in Angular
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.