How to use "innerHTML "on the" textarea " component"?

Question

How to use "innerHTML" in the "textarea" component? I do that but nothing works.

<textarea [innerHTML]="notebook.description"
    class="form-control" name="description" 
    style="height:320px"  [(ngModel)]='notebook.description' disabled>
</textarea>

As mentioned in [this post](https://stackoverflow.com/q/4705848/1009922), you cannot render HTML inside a `textarea` element. — ConnorsFan, Aug 05 '18 at 14:21
Take a look at [this post](https://stackoverflow.com/q/35378087/1009922) for possible solutions with a `contenteditable` `div`. — ConnorsFan, Aug 05 '18 at 14:27

ravi · Answer 1 · 2018-08-05T17:56:02.290

0

kind of workaround

in html

<textarea [innerHTML]="getInnerHTML(name)" cols="" rows=""></textarea>

and in .ts file

getInnerHTML(val){ return val.replace(/(<([^>]+)>)/ig,''); }

refer the same on https://stackblitz.com/edit/angular-hnwgad?file=src%2Fapp%2Fapp.component.html

//ignore below one

try using

<textarea [innerHtml]="note.description"></textarea>

or

<textarea [(ngModel)]="note.description"></textarea>

edited Aug 05 '18 at 17:56

answered Aug 05 '18 at 14:11

ravi

1,127
9
10

But there tags remain if remove "innerHtml" – user10149472 Aug 05 '18 at 14:15
i didn't get what you mean @user10149472 – ravi Aug 05 '18 at 14:17
The text is displayed along with the tags in the "textarea" component – user10149472 Aug 05 '18 at 14:19
which approach you have used [innerHtml] or [(ngModel)] – ravi Aug 05 '18 at 14:21
I used [innerHtml] – user10149472 Aug 05 '18 at 14:23
@user10149472 https://stackblitz.com/edit/angular-hnwgad?file=src%2Fapp%2Fapp.component.html please look into it, i have tried with both ngModel and innerHtml and it works – ravi Aug 05 '18 at 14:30
@ravi - I think he has HTML tags in his bound string. See [this stackblitz](https://stackblitz.com/edit/angular-7qbxi4). – ConnorsFan Aug 05 '18 at 14:34
@ConnorsFan you are right ,if you add tags in the value , tags are going to appear in the textarea – ravi Aug 05 '18 at 14:37
@user10149472 my bad i didn't get the problem, that issue was of tag containing in the string , just tried bit of workaround https://stackblitz.com/edit/angular-hnwgad?file=src%2Fapp%2Fapp.component.html look into it might help – ravi Aug 05 '18 at 17:59

How to use "innerHTML "on the" textarea " component"?

1 Answers1

Linked