Angularjs html tags showing instead of rendering

Question

I have the following variable:

$scope.someVar= "Some<br>text<br>here";

When I call it in the HTML document with {{ someVar }} I get the following output:

Some text here

I would like the following output:

Some
text
here

What can I do so the HTML code is rendered?

Thank you in advance for all suggestions.

use ng-bind-html from ngSanitize module. You can also $compile it from a directive — Aleksey Solovey
– Aleksey Solovey, Commented Apr 25, 2018 at 9:51
Hi @AlekseySolovey , thanks for your reply. I just started angularjs. Not sure how to use that, but if I am not mistaken I need to do that the following way: . Can I apply it somehow with the {{someVar}} code? — Serge Inácio
– Serge Inácio, Commented Apr 25, 2018 at 10:03

Vipul Solanki · Accepted Answer · 2018-04-25 10:04:01Z

3

You can use ng-bind-html

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h3>John Doe</h3>";
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p ng-bind-html="myText"></p>

</div>

</body>
</html>

answered Apr 25, 2018 at 10:04

Vipul Solanki

3111 gold badge2 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Serge Inácio Over a year ago

Thank you @VipulSolanki It worked. Is it any way possible to use ng-bind-html when calling the variable between the brackets ({{someVar}})? or do I have to use an HTML tag?

Vipul Solanki Over a year ago

like this (<ng-bind-html ng-bind-html="myText"></ng-bind-html>) ? or do you want to use this variable in function?

Serge Inácio Over a year ago

I have it like this: {{ varOne }} {{ varTwo }}  at the moment, and would like to have {{ varOne}} {{ varTwo }} {{ varThree }}. If that is possible. varOne and varTwo work fine as they have no HTML tags.

Vipul Solanki Over a year ago

Yes, you can. if varOne or varTwo has possibly html value or not, you can use like  . if variable has html code it converted otherwise it'll return actual value.

Mgasmi · Accepted Answer · 2018-04-25 11:04:19Z

1

Other solution :
you can use $sce,
example :
html:

<div ng-app="testApp" ng-controller="testController">
    <p ng-bind-html="someVar"></p>
</div>

js:

var app = angular.module('testApp', []);

app.controller('testController', ['$sce', '$scope', function($sce, $scope) {

    $scope.someVar =  $sce.trustAsHtml("Some<br>text<br>here");
}]);

answered Apr 25, 2018 at 11:04

Mgasmi

4173 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angularjs html tags showing instead of rendering

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related