How to use AngularJS to Display HTML content value ?

Last Updated : 05 Sep, 2022

The ng-bind-html Directive is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. The $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements.

Syntax:

<element ng-bind-html="expression"> 
    Contents... 
</element>

Approach:

Initialize the libraries that we are using. Here, we are mainly using the angular-sanitize.js library.
Create an app and its controller scope.
Define the controller variable.
Call the app and controller to the body of HTML.
Inside the body use span tag and use attribute ng-bind-html and assign the value as the scope variable.

Example 1: This example illustrates the rendering of the HTML content values using AngularJS.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Displaying HTML content value in AngularJS</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"
            charset="utf-8">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"
            charset="utf-8">
    </script>
</head>

<body ng-app="myApp" 
      ng-controller="myCtrl"> 
      <span ng-bind-html="message"></span>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngSanitize']);
        app.controller('myCtrl', function($scope) {
            $scope.message = '<h1>GeeksforGeeks</h1>';
        });
    </script>
</body>
</html>

Output:

Example 2: This example illustrates the implementation of the ng-bind-html directive to display the HTML content value using AngularJS.