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. 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.

Output:

👁 Image

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

Output:

👁 Image