HTML
<div><code><pre>{{out_html}}</pre></code></div>
AngularJS
$scope.out_html = "<p style='color:red'>John Smith</p>";
I want to show that 'p' tag name "John smith" in red color in html browser. But here it's showing html code instead of red color `John Smith.
You can bind it like:
<div>
<code>
<pre ng-bind-html="out_html" style="color:red;"></pre>
</code>
</div>
For Color you can style <pre> element.
The ng-bind-html directive is a secure way of binding content to an HTML element. For more Details: https://www.w3schools.com/angular/ng_ng-bind-html.asp
you can user ng-bind-html directive for binding a html in angular js,
here is your working plunker
<code>
<pre>
<p ng-bind-html="out_html"></p>
</pre>
</code>
Yes, Angular sanitizes binded expressions by default. To prevent that you can use ngBindHtml: https://docs.angularjs.org/api/ng/directive/ngBindHtml.
However, if this is just a matter of styling, why don't you use ngClass ? https://docs.angularjs.org/api/ng/directive/ngClass
You can separate your p tag value and p color, just add another variable/scope
HTML
<div><code><pre><p style='color:{{color}}'>{{value}}</p></pre></code></div>
AngularJS
$scope.value = "John Smith";
$scope.color = "red";
This is a safety precaution from angularjs. This is to ensure unwanted behaviour. So Angular will always escape the tags for you. What you can do is use ng-bind-html but what's very important is that you first "allow" this string to be interpreted as HTML that works with trustAsHtml.
angular.module('test', []).controller('ctrl', function($scope, $sce) {
$scope.out_html = "<p style='color:red'>John Smith</p>";
$scope.trust = $sce.trustAsHtml;
});
<span ng-bind-html="trust(out_html)"></span></div>
Here is also another thread of that problem: https://stackoverflow.com/a/28444859/8196542
