Display HTML code in text box

Question

I am having a text box which I am filling from the Json response as below

 <div class="gadget-body" style="height:100px">
    <label>{{ textData}}</label>
  </div>

But now my Json is returning html code with <p> and <h1> tags. I am binding the response, but it is displaying with <p> and <h1> tags instead of applying it.

Possible duplicate of [Display HTML code in HTML](https://stackoverflow.com/questions/2820453/display-html-code-in-html) — Bernd Strehl, Jun 02 '17 at 18:22
@Strernd I saw the link, but my case is different. I am using Angular2 and my Json response has html tags, which I need to convert and show it. — phani1382, Jun 02 '17 at 18:28
@phani1382 https://stackoverflow.com/questions/31548311/angular-2-html-binding — tech2017, Jun 02 '17 at 18:29
Give a id to your label and use innerHtml using that id and bind it. @techLove gave an example of it. — ISHIDA, Jun 02 '17 at 18:34
Questions seeking help ("**why isn't, or how to make, this code working?**") must include the desired behavior, a _specific problem or error and the **shortest code necessary**_ to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Asons, Jun 02 '17 at 18:56

score 1 · Accepted Answer · answered Jun 05 '17 at 15:52

1

The simple and easiest way is use innerhtml tag

<div class="gadget-body" >
   <div [innerHTML]="textData">
</div>
  </div>

answered Jun 05 '17 at 15:52

indra257

66
3
24
50

score 0 · Answer 2 · answered Jun 02 '17 at 18:42

Maybe have a function like this :

function htmlToPlaintext(text) {
  return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}

and then you'd use:

<div class="gadget-body" style="height:100px">
    <label>{{ htmlToPlaintext(textData) }}</label>
</div>

Display HTML code in text box

2 Answers2