Angular HTML binding

Question

I am writing an Angular application and I have an HTML response I want to display.

How do I do that? If I simply use the binding syntax {{myVal}} it en

Answer 1

Just simply use [innerHTML] attribute in your HTML, something like this below:

Ever had properties in your component that contain some html markup or entities that you need to display in your template? The traditional interpolation won't work, but the innerHTML property binding comes to the rescue.

Using {{myVal}} Does NOT work as expected! This won't pick up the HTML tags like

, etc and pass it only as strings...

Imagine you have this code in your component:

const myVal:string ='Stackoverflow is helpful!'

If you use {{myVal}}, you will get this in the view:

Stackoverflow is helpful!

but using [innerHTML]="myVal"makes the result as expected like this:

Stackoverflow is helpful!