CODEWITHSUNDEEP
htmlangularjs
John P
John P

Reputation: 1219

Html - rendering a text containing html tags displays the tags as plain text

I am using angularJS, where I have a property 'description', which I have to display to the user. The problem is that this property contains some html code, which is being displayed to the user as plain text. Here is my code:

<span class="cst-bold">Activity description </span>
{{pack.activities.current['description']}}

I also tried to surround the variable with 

, but it also did not solve anything. Just a little different formatting. Here is the result after using the <pre> tag:



enter image description here



How can I solve the problem with tags? Thank you!


Upvotes: 0
Views: 63
Answers (1)
ferhado
ferhado
Reputation: 2604
use a custom filter trusted and ng-bind-html Example







angular.module('app',[])
.controller('Ctrl',function($scope){
     $scope.description="<h1>Hallo World!</h1>";
})
.filter('trusted', function($sce){
    return function(html){return $sce.trustAsHtml(html)
  }
})


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
   <span class="cst-bold">Activity description </span>
   <span>{{description}}</span>
   <span ng-bind-html="description|trusted"></span>
</div>








Upvotes: 1
Related Questions