Render HTML tags which is inside javascript object

Question

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.

Nachshon Schwartz · Accepted Answer · 2015-05-10 14:54:50Z

4

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>

edited May 10, 2015 at 14:54

answered May 10, 2015 at 14:42

Nachshon Schwartz

15.9k20 gold badges65 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Render HTML tags which is inside javascript object

My Article Title

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

My Article Title

1 Answer 1

Comments

Related