Showing HTML content in AngularJS expressions

AngularJS will remove any HTML markup that you want to display on the screen using an expression.

For example.

$scope.message=”Welcome to pixxstudios”;

and expression is:

{{message}}

When Angular tries to execute this expression, it will remove any HTML markup it finds ( in this case and ) and will convert it to normal text. So after the execution process the expression will display.

Welcome to <b> pixxstudios </b>

If you want to display the HTML markups as it is and skip the Angular converting it to plain text process, you can use ng-bind-html-unsafe directive.

AngularJS provides one more directive that will allow certain HTML tags to be displayed as it is and convert other to plain text: ng-bind-html.

NOTE: To use ng-bind-html directive in your application you need to include angular-sanitize.js as it resides in a separate module ngSanitize. You need to declare dependency on the ngSanitize module from our application module.

Related Posts

Leave a Reply