Style JSON with HTML in Angular App

Question

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."
  }
]

How did it not work? Was there a console error from angular or did it not display? Can you give an example of how you are using the trustAsHtml? — imaCoden
– imaCoden, Commented Sep 26, 2017 at 19:03

mahip_j · Accepted Answer · 2017-09-26 19:39:47Z

1

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

answered Sep 26, 2017 at 19:39

mahip_j

3682 silver badges11 bronze badges

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

1 Comment

user5854648 Over a year ago

This did it! At first I couldn't get it to work, then I remembered I had to call it in angular.module. You really helped me out big time, and I am really grateful.

Mike Feltman · Accepted Answer · 2017-09-26 19:28:12Z

0

This

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

</div>

Will probably do the trick.

edited Sep 26, 2017 at 19:28

answered Sep 26, 2017 at 19:08

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

Style JSON with HTML in Angular App

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related