AngularJS ng-bind-html Directive

Last Updated : 01 Aug, 2022

The ng-bind-html Directive in AngularJS is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. $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>

Parameter Value:

expression: It specifies the variable or the expression that is to be evaluated.

Example 1: This example illustrates the ng-bind-html Directive in AngularJS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-bind-html Directive</title>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
    </script>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
    </script>

    <style>
        .green {
            color: green;
            font-size: 20px;
        }
    </style>
</head>

<body ng-app="myApp" 
      ng-controller="geek" 
      style="text-align:center">

    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>ng-bind-html Directive</h3>
    <p ng-bind-html="text"></p>


    <script>
        var myApp = angular.module("myApp", ['ngSanitize']);
        myApp.controller("geek", ["$scope", function ($scope) {
            $scope.text =
                "<span class='green'> GeeksforGeeks</span> is the"
                + " computer science portal for geeks.";
        }]);
    </script>
</body>
</html>

Output:

ngbindhtml

Example 2: This is another example that illustrates the implementation of the ng-bind-html Directive in AngularJS.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>ng-bind-html Directive</title>

    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
    </script>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
    </script>

    <style>
        .green {
            border: 2px dashed red;
            border-radius: 50px;
            color: green;
            font-weight: bold;
            font-size: 25px;
            font-family: 'Arial';
        }
    </style>
</head>

<body ng-controller="geek" style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>ng-bind-html Directive</h3>
    <p ng-bind-html="text"></p>


    <script>
        var myApp = angular.module('myApp', ['ngSanitize']);
        myApp.controller('geek', [
            '$scope',
            function ($scope) {
                $scope.text =
"<p class ='green'> GeeksforGeeks Learning Together</p>";
            },
        ]);
    </script>
</body>
</html>