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.

@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
– phani1382, Commented Jun 2, 2017 at 18:28
@phani1382 stackoverflow.com/questions/31548311/angular-2-html-binding — tech2017
– tech2017, Commented Jun 2, 2017 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
– ISHIDA, Commented Jun 2, 2017 at 18:34

indra257 · Accepted Answer · 2017-06-05 15:52:34Z

1

The simple and easiest way is use innerhtml tag

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

answered Jun 5, 2017 at 15:52

indra257

865 gold badges27 silver badges54 bronze badges

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

Comments

Marko Mackic · Accepted Answer · 2017-06-02 18:42:51Z

0

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>

answered Jun 2, 2017 at 18:42

Marko Mackic

2,3431 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

Display HTML code in text box

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related