How to use SafeHtml & DomSanitizer to display dynamic HTML content from server inside tooltips...

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

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



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.





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

Continue reading...