How to use AngularJS to Display HTML content value ?

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. $sanitize service is a must for 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 use angular-sanitize.js library.
Create app and its controller scope.
Define the contoller variable.
Call the app and controller to body of html.
Inside the body use span tag and use attribute ng-bind-html and assign the value as the scope variable.

Example:

<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <span ng-bind-html="message"></span> 
  
    <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> 
    <script type="text/javascript"> 
    var app=angular.module('myApp',['ngSanitize']); 
    app.controller('myCtrl',function($scope){ 
        $scope.message = '<h1>GeeksforGeeks</h1>'; 
    }); 
    </script>  
</body> 
</html> 

Output:

My Personal Notes

Recommended Posts:

adarshunni3

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.