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] ?

they are used for different purposes. expression binding ({{}}) outputs raw text, while [innerHTML] outputs HTML formatted text. What is "best" depends on what the variable contains. — Claies
– Claies, Commented Oct 3, 2017 at 3:35

Chandru · Accepted Answer · 2017-10-03 04:14:47Z

3

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 -->

answered Oct 3, 2017 at 4:14

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Gangpuri · Accepted Answer · 2017-10-03 04:14:16Z

0

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

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

answered Oct 3, 2017 at 4:14

Shubham Gangpuri

4314 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related