如何将 html 字符串（html 标签）显示为文本区域中的内容？

Question

I want to display the html tags in a div tag so i used like,

<p [innerHTML]="data"> // data is a html tags for ex: h1 tag
</p>

it is working fine but if i want to print in the text area, it is not translating the html code and directly printing the html code like,

<textarea  rows="4" cols="50">
    {{data}}
</textarea>

Here is the working code on stackblitz,

Answer 1

<textarea> is input element, you cannot bind HTML tags like <b> or <i> in it.

To bind the data remove this HTML tags from typescript and bind it in <textarea> using [(ngModel)]

Try like this:

<textarea  rows="4" cols="50" [(ngModel)]="data">
</textarea>

Answer 2

This is not possible, what you are looking for is a content editable div. Look at this fiddle , but basically you need to (just translate this to Angular):

<div contenteditable="true">This is the first line.<br>
    See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the e nd?
    <br>It works nicely.
    <br>
    <br><span style="color: lightgreen">Great</span>.
</div>

Answer 3

This question already has answer in stackblitz, Rendering HTML inside textarea

What you are doing is, set the div tag editable