Is it best way to data binding with [innerHTML], angular 4

Question

My problem is that in angular 4 there are few ways to data bind with HTML to TS like {{myText}}, [], () and other than those we can use [innerHTML]="myText"

what is the best way to bind simple variable to HTML among {{}}, [innerHTML] ?

Answer 1

Try like this :

<div [innerHTML]="htmlString"></div>

in typescript file :

htmlString: string = "Hello world"; <!-- if want to display string -->
htmlString: string = "<h1>Hello world</h1>"; <!-- if want to display html element -->

Answer 2

Bind it with {{yourText}} is it is not containing any HTML markups

Bind it with [innerHTML] = "youtText" if it has any HTML markups