How can I make my HTML model data display in a <textarea> as it would in a browser?

Question

My code returns HTML data from ASP.NET as a response from an action method.

I am displaying this in a <textarea> element.

    <textarea style="width: 85rem; height: 15rem;"
              ng-disabled=true
              ng-model="access.response"></textarea>

However when it displays I see the actual HTML.

How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.

Answer 1

Is correct to say that you cannot display it in a textarea , but you can't use a simple div neither to display the parsed HTML.

Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP

You have to make use of the $sce service and the ng-bind-html directive, like this:

    <div ng-controller="SimpleCtrl"> 

        <!-- This will be parsed as HTML-->
        <div ng-bind-html="to_trusted(someCode)"></div>

        <!-- This will not -->
        <div>{{someCode}}</div>

    </div>

Answer 2

No way to do it with textarea .

If you want editable HTML content, consider this:

<div contenteditable="true"></div>