CODEWITHSUNDEEP
angulartypescript
Kousika Ganesan
Kousika Ganesan

Reputation: 609

what is the good way to render html contents in angular4?

I have a string of html contents. How to render it in html page without using document.write() in angular 4?

my string looks like:

`<mark>4.95</mark><mark>Nunavut</mark><mark>Office Furnishings</mark><mark>0.37
 7</mark><mark>"Angle-D Binders with Locking Rings</mark><mark> Label Holders"</mark><mark>Carl Jackson</mark><mark>613</mark><mark>-54.04</mark><mark>7.3</mark><mark>7.72</mark><mark>Nunavut</mark><mark>Binders and Binder Accessories</mark><mark>0.38
 8</mark><mark>"SAFCO Mobile Desk Side File</mark><mark> Wire Frame"</mark><mark>Carl Jackson</mark><mark>613</mark><mark>127.70</mark><mark>42.76</mark><mark>6.22</mark>Nunavut<mark>Storage & Organization</mark><mark>
 9</mark><mark>"SAFCO Commercial Wire Shelving</mark><mark> Black"</mark><mark>Monica Federle</mark><mark>643</mark><mark>-695.26</mark><mark>138.14</mark><mark>35</mark><mark>Nunavut</mark><mark>Storage & Organization</mark><mark>
 10</mark><mark>Xerox 198</mark><mark>Dorothy Badders</mark><mark>678</mark><mark>-226.36</mark><mark>4.98</mark><mark>8.33</mark>
`

Upvotes: 0

Views: 420

Answers (2)

Paras
Paras

Reputation: 715

Save your string like:

htmlString:String = `<mark> ..... </mark>`;

And you can use innerHTML in a div like this:

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

Source

Upvotes: 1

realharry
realharry

Reputation: 1575

In your component, say, MyComponent.ts, define your string as an attribute/property:

public myString = "<mark>...</mark>";

Then, in your template, MyComponent.html, set the innerHtml of a div to this string:

<div [innerHtml]="myString"></div>

Upvotes: 3

Related Questions