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>