CODEWITHSUNDEEP
javascripthtmlangularjsjson
user5854648
user5854648

Reputation: 1121

Style JSON with HTML in Angular App

I am injecting text into my Angular app with JSON objects. There is a "bio" section which requires HTML styling such as <br /> that way the text is not one chunk of unreadable text. I have tried trustAsHtml but it did not work for me. A working example would be best as I have read through Angular documentation and cannot get anyhting to work for me.

Help is greatly appreciated!

HTML w/ Angular JS

<div class="bio">
    {{exhibits[whichItem].bio}}
</div>

JSON

[
  {
    "name":"Name goes here",
    "bio":"First long block of text goes here then it needs a break <br /> and the second long block of text is here."
  }
]

Upvotes: 1

Views: 271

Answers (2)

mahip_j
mahip_j

Reputation: 368

you have to add 'ngSanitize' module as dependency also you have to include corresponding script :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>

then use ng-bind-html

<div class="bio" ng-bind-html="exhibits[whichItem].bio">

</div>

if you don't use ngSanitize module , it will give you error for ng-bind-html

You can refer here

Upvotes: 1

Mike Feltman
Mike Feltman

Reputation: 5176

This

<div class="bio"ng-bind-html=exhibits[whichItem].bio>

</div>

Will probably do the trick.

Upvotes: 0

Related Questions