Angular - decode string as HTML

Question

I have some angular expressions that contain data coming from a database. Some of this data contain HTML tags in the database and should be decoded as such in the HTML.

Javascript function:

vm.showTechnicalSupport = function () {
        $http.get('Navigation/GetTechSupportInformation').success(function (data) {
            vm.techSupportHours = data.techSupportHours;
        })

    }

HTML:

<span>{{ vm.techSupportHours}}</span>

The problem is techSupportHours is displaying raw HTML tags instead of rendering markup. For example, there are br tags being displayed visibly on the page. Is there a way to modify my angular expression to decode this data?

Possible duplicate of How to display or any raw html in angular data? — groteworld
– groteworld, Commented Jan 13, 2016 at 21:19

Michele Ricciardi · Accepted Answer · 2016-01-13 21:16:32Z

2

There is a directive called ng-bind-html which is what you are looking for. So just change your html template to be:

<span ng-bind-html="vm.techSupportHours"></span>

answered Jan 13, 2016 at 21:16

Michele Ricciardi

2,11716 silver badges17 bronze badges

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

2 Comments

noclist Over a year ago

Nothing is displaying when I use this directive.

Michele Ricciardi Over a year ago

@noclist Pleas ensure you also include angular-sanitize, it's part of Angular but not included in the core angular.js. You can see a working example here: plnkr.co/edit/oS492EJ0OujuC9M0Vt1V?p=preview

Collectives™ on Stack Overflow

Angular - decode string as HTML

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related