How to display HTML from model as HTML, not plain text

Question

I'm learning Angular and making a todo app. Creating a todo uses a wysiwyg editor (textAngular). It looks like this:

This works properly and gets saved as html to ng-model named todo.description. But when displaying this todo, the html from the description is displayed as plain text. Like so:

The description is just bound to the model

<p class="text-muted">{{todo.description}}</p>

I think this can be done very simple but I didn't find a solution. I tried the xmp tag, but that's not what I'm looking for.

How can I make the description display HTML and not text?

probably this string is escaped. So you need to put raw text — Robert
– Robert, Commented Jul 29, 2015 at 9:09
Question is basically duplicate indeed. But the answer given by @Vishnu is different and beter. I consider this question not having added value, but the answer does. — RobSeg
– RobSeg, Commented Jul 29, 2015 at 9:20
@Tonny seems to be two different questions. In the mentioned links, all html tag will be ignored and model will be rendered as plain text without style. — Sam Su
– Sam Su, Commented Aug 5, 2016 at 3:28

Vishnu · Accepted Answer · 2015-07-29 09:11:24Z

7

<p class="text-muted" ng-bind-html="todo.description"></p>

https://docs.angularjs.org/api/ng/directive/ngBindHtml

answered Jul 29, 2015 at 9:11

Vishnu

12.4k7 gold badges57 silver badges91 bronze badges

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

Comments

Marcin Orlowski · Accepted Answer · 2015-07-29 09:12:20Z

1

you need to use $trustAsHTML filter of $sce (Strict contextual escaping)

edited Jul 29, 2015 at 9:12

Marcin Orlowski

75.7k11 gold badges128 silver badges152 bronze badges

answered Jul 29, 2015 at 9:11

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Comments

Christoph · Accepted Answer · 2015-07-29 09:23:22Z

1

You can use ngBindHtml to display your html code.

var app = angular.module('myApp', ['ngSanitize']);

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.html = '<b>Test</b><u>Test</u>&lt;HTML';
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-bind-html="html"></span>
</div>

edited Jul 29, 2015 at 9:23

answered Jul 29, 2015 at 9:10

Christoph

2,0531 gold badge27 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to display HTML from model as HTML, not plain text

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related