How to use AngularJS to Display HTML content value ? Last Updated : 05 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. HTML <!DOCTYPE html> <html ng-app="myApp"> <head> <title> Displaying HTML content value in AngularJS </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>Displaying HTML content value in AngularJS</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> Output: Comment More infoAdvertise with us Next Article How to get the value of radio button using AngularJS ? A adarshunni3 Follow Improve Article Tags : Technical Scripter Web Technologies AngularJS Technical Scripter 2019 AngularJS-Questions +1 More Similar Reads How to get form input value using AngularJS ? Given a form element and the task is to get the form values input by the user with the help of AngularJS.Approach: We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method. After that, data from the JSON object can be a 2 min read How to insert HTML into view from AngularJS controller? The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive. While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the "a 2 min read How to display variable from .ts file to .html file in angular 17 In Angular, when you're working on a component, you use TypeScript files (.ts) to write the code that controls how the component behaves. On the other hand, HTML files (.html) handle how the user interface looks and gets displayed. Table of Content Data BindingSteps to Create Angular ApplicationInte 3 min read How To Display Values With Interpolation In Angular? Angular is a powerful framework for building dynamic web applications. One of its key features is data binding, which allows developers to display and update values seamlessly within the UI. Interpolation is a fundamental technique in Angular that enables the integration of component data directly i 3 min read How to get the value of radio button using AngularJS ? In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific e 2 min read How to Filter Multiple Values in AngularJS ? AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use 6 min read Like