Insert HTML into view from AngularJS controller

Question

Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view?

This comes from a requirement to turn an

Answer 1

Use

<div ng-bind-html="customHtml"></div>

and

angular.module('MyApp', ['ngSanitize']);

For that, you need to include angular-sanitize.js, for example in your html-file with

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

Answer 2

Angular JS shows HTML within the tag

The solution provided in the above link worked for me, none of the options on this thread did. For anyone looking for the same thing with AngularJS version 1.2.9

Here's a copy:

Ok I found solution for this:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

EDIT:

Here's the set up:

JS file:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML file:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

Answer 3

Working example with pipe to display html in template with Angular 4.

1.Crated Pipe escape-html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

` 2. Register pipe to app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]

3. Use in your template

       <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

4. getDivHtml() { //can return html as per requirement}

   Please add appropriate implementation for getDivHtml in associated component.ts file.

Answer 4

In Angular 7 + ionic 4, Html contents can be shown by using "[innerHTML]":

<div [innerHTML]="htmlContent"></div>

I hope, this will also help you. Thanks.

Answer 5

ng-bind-html-unsafe no longer works.

This is the shortest way:

Create a filter:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

And in your view:

<div ng-bind-html="customHtml | unsafe"></div>

P.S. This method doesn't require you to include the ngSanitize module.

Answer 6

I found that using ng-sanitize did not allow me to add ng-click in the html.

To solve this I added a directive. Like this:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

And this is the HTML:

<htmldiv content="theContent"></htmldiv>

Good luck.