ng-BindHtml Directive of AngularJS

Introduction

In my previous articles I told you about:

In this article I will tell you about the ng-BindHtml Directive of AngularJS.

Using ng-BindHtml we can declare a HTML element in the Controller but they work similarly to a normal HTML element.

Step 1

First of all you need to add two external Angular.js files to your application, in other words:

angular.min.js
angular-sanitize.min.js

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the External Files now you need to add these files to the Head section of your application.

</head>

Step 2

Now I will work on the ViewModel or JavaScript part of this application, here I am using the second method for initializing AngularJS (I already told you three ways of initializing AngularJS).

Write this code in the Head Section:

angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope) {

$scope.html = 'You can see that I am <b>Bold </b> and <I>Italic </I> also';

});

</script>

</head>

Here I declared "htmldoc" using the angular.module, this "htmldoc" is the value that will be provided in the ng-app. Then "ngSanitize" is used that is necessary if we are using ng-BindHtml.

Then I have provided the name of the controller as "x", then you can see that I have provided an initial value in which the bold and italic tags are used, in the output you will see that they are working as normal HTML elements work.

Our work on ViewModel is complete and now we just need to work on the View part or design part of this application.

Step 3

Write this code in the Body tag:

<body>

</div>

</form>

</body>

Here I had first provided the controller name in the div, then I had bound the HTML document that was created in the head tag with the <p> tag using the ng-bind-html.

Now our application is ready to be executed.

The complete code of this application is as follows:

angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope) {

$scope.html = 'You can see that I am <b>Bold </b> and <I>Italic </I> also';

});

</script>

</head>

<body>

</div>

</form>

</body>

</html>

Output

On running the application you will get an output like this one:

ng-bindhtml using AngularJS

Now I am making a slight change in the Script, I am adding a <H2> tag.

angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope) {

$scope.html = 'You can see that I am <h2>Heading </h2> and <I>Italic </I> also';

});

</script>

You will see that the output is showing the text as expected.

ng-bindhtml using AngularJS