CODEWITHSUNDEEP
htmlangularjsrendering
Serge Inácio
Serge Inácio

Reputation: 1382

Angularjs html tags showing instead of rendering

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<br>text<br>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.

Upvotes: 1

Views: 600

Answers (2)

Mgasmi
Mgasmi

Reputation: 417

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");
}]);

Upvotes: 1

Vipul Solanki
Vipul Solanki

Reputation: 311

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>

Upvotes: 3

Related Questions