In this article I will explain with an example, how to use ngSanitize module to display HTML content in AngularJS.
Display HTML using ngSanitize in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Along with the AngularJS JavaScript file, angular-sanitize.js file also needs to be inherited in order to use ngSanitize module.
The ng-controller uses ngSanitize module in order to display HTML content.
The AngularJS app HTML DIV consists of an HTML SPAN specified with ng-bind-html directive, which will be used to display HTML content.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngSanitize'])
app.controller('MyController', function ($scope) {
$scope.Message = "My name is <span><b>Mudassar Khan</b></span>";
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span ng-bind-html="Message"></span>
</div>
</body>
</html>
Screenshot
![AngularJS ngSanitize example: Display HTML using ngSanitize in AngularJS]()
Demo
Downloads
