HTML String does not display correctly

Question

It has been a while and I know there is a solution. I am retrieving an object from Firebase 3. The field is a string containing html. I am inserting the value into an Angular2 component.html. Is there a way, function call, method to render the html without the <b> tag in Angular2?

   key: Description
   value: <p>Hello World</p>

In my Angular component HTML

   <h3>Description</h3><div>{{something.Description}}</div>

The html is render as:

Yes there is. Check it out http://stackoverflow.com/questions/20778709/prevent-angular-from-escaping-html — Leonardo Lana, Dec 22 '16 at 17:29

NSTuttle · Answer 1 · 2016-12-22T17:42:00.180

A few ways to acheive this:

1) Try using the .append method of angular instead.

<h3>Description</h3><div id='divID'></div>

var myElement = angular.element( document.querySelector( '#divID' ) );
myElement.append('<p>Your values/variables</p>');

2) For Angular 2:

<div [innerHTML]="theHtmlString">
</div>

3) For those that come across this still using Angular 1 vs 2:

A different way, is ng-bind-html, something like so:

HTML

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

JS

angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.myHTML =
     '<h3>Description:</h3>' +
     '<div> YOUR VARIABLES </div>';
}]);

I'd suggest removing the `ng-bind-html` portion of your answer, only because it may confuse readers who stumble upon this question in the future - it is not correct, as OP has specifically stated he's looking for an Angular 2 solution. **EDIT:** Nice edit :) — Tyler Roper, Dec 22 '16 at 17:38

score 2 · Answer 2 · answered Dec 22 '16 at 17:35

2

ng-bind-html (as many are suggesting) is not an Angular2 solution. Use [innerHTML] instead.

<div [innerHTML]="something.Description"></div>

answered Dec 22 '16 at 17:35

Tyler Roper

21,445
6
33
56

HTML String does not display correctly

2 Answers2