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:
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>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
01 Aug, 2022
Like Article
Save Article