Rendering HTML tags that are inside a javascript object
I have a javascript object that I am displaying in an angularjs web app. The object is string characters with html tags "<h1></h1>"
and the "<p></p>"
problem is that when rendering on an html page, the tags are supposed to be rendered as normal html tags, but this is not the case. it rather shows raw tag characters.
This is what is displayed in the html page
<h1>My Article title</h1><p>My article content goes here</p>
This is what I expect to see
Title of my article
My Article content Goes here
Angular Code
$scope.$apply(function(){
$scope.eventsRaw = JSON.parse(data);
$scope.eventDT = $scope.eventsRaw[0];
})
HTML code
<div>
{{eventDT.name}}
{{eventDT.desc}}
</div>
How to render it correctly. the actual file is retrieved from the database.
Thank.
source to share
Using:
<span ng-bind-html="tagsString"></span>
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Note: to use this, you must enable ngSanitize depending on your module.
In your code:
<div>
<span ng-bind-html="eventDT.name"></span>
<span ng-bind-html="eventDT.desc"></span>
</div>
source to share