CODEWITHSUNDEEP
javascripthtmlangularjs
David Addoteye
David Addoteye

Reputation: 1641

Render HTML tags which is inside javascript object

I have a javascript object i am displaying in an angularjs web app. The object is a string characters with html tags "<h1></h1>" and "<p></p>" The problem is that when i render it on the html page is suppose to render the tags as regular html tags but it does not. it rather shows the tags raw character.

This is what is show on the html page

<h1>My Article title</h1><p>My article content goes here</p>

This is what i am expecting to see

My Article Title

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 do i make it render properly. the actual file are pulled from a database.

Thank you.

Upvotes: 3

Views: 1070

Answers (1)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15795

Use:

<span ng-bind-html="tagsString"></span>

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

Note: to use this you must include ngSanitize in your module dependencies.

In your code:

<div>
  <span ng-bind-html="eventDT.name"></span>
  <span ng-bind-html="eventDT.desc"></span>
</div>

Upvotes: 4

Related Questions