Adding HTML content to angular material $mdDialog

Question

I have written the following piece of code to display some contents in angular material dialog box. it works fine when i add plain text to textContent . when i add HTML its displays HTML as text. how do i bind HTML to textContent

This Works

  <a href="#" ng-click="$scope.Modal()">Sample Link</a>

  $scope.Modal = function () {
      $mdDialog.show(
          $mdDialog.alert()
              .parent(angular.element(document.querySelector('body')))
              .clickOutsideToClose(true)
              .textContent('sample text')
              .ok('Ok')
      );      
  }

This Doesn't Works

  <a href="#" ng-click="$scope.Modal()">Sample Link</a>

  $scope.Modal = function () {
      $mdDialog.show(
          $mdDialog.alert()
              .parent(angular.element(document.querySelector('body')))
              .clickOutsideToClose(true)
              .textContent('<div class="test"><p>Sample text</p></div>')
              .ok('Ok')
      );
  }

Thanks in advance

score 6 · Answer 1 · answered Nov 17 '16 at 04:41

You need to append to the template,

 $mdDialog.show({
      parent: angular.element(document.body),
      clickOutsideToClose: true,
      template: '<md-dialog md-theme="mytheme">' +
        '  <md-dialog-content>' +
        '<div class="test"><p>Sample text</p></div>' +
        '        <md-button ng-click="closeDialog();">Close</md-button>' +
        '  </md-dialog-content>' +
        '</md-dialog>',
      locals: {

      },
      controller: DialogController
    });

DEMO

score 3 · Answer 2 · answered Jul 20 '17 at 12:18

You can add html in template and just add variable in displayOption. This will work.

Template Code

<script type="text/ng-template" id="confirm-dialog-answer.html">
<md-dialog aria-label="confirm-dialog">
    <form>
        <md-dialog-content>
            <div>
                <h2 class="md-title">{{displayOption.title}}</h2>
                <p>{{displayOption.content}} <img src="{{displayOption.fruitimg}}"/></p>
                <p>{{displayOption.comment}}</p>
            </div>
        </md-dialog-content>
        <div class="md-actions" layout="row">
            <a class="md-primary-color dialog-action-btn" ng-click="cancel()">
                {{displayOption.cancel}}
            </a>
            <a class="md-primary-color dialog-action-btn" ng-click="ok()">
                {{displayOption.ok}}
            </a>
        </div>
    </form>
</md-dialog>
</script>

Controller Code

$mdDialog.show({
                      controller: 'DialogController',
                      templateUrl: 'confirm-dialog-answer.html',
                      locals: {
                       displayOption: {
                        title: "OOPS !!",
                        content: "You have given correct answer. You earned "+$scope.lastattemptEarnCount,
                        comment : "Note:- "+$scope.comment,
                        fruitimg : "img/fruit/"+$scope.fruitname+".png",
                        ok: "Ok"
                       }
                      }
                     }).then(function () {
                        alert('Ok clicked');

                     });

score 2 · Answer 3 · answered Nov 17 '16 at 04:45

Use template instead of textContent, textContent is used for show plan text in a model. It does not render HTML code

$mdDialog.show({
                controller: function ($scope) {
                    $scope.msg = msg ? msg : 'Loading...';
                },
                template: 'div class="test"><p>{{msg}}</p></div>',
                parent: angular.element(document.body),
                clickOutsideToClose: false,
                fullscreen: false
            });

score 0 · Answer 4 · answered Aug 11 '17 at 16:30

You can use htmlContent instead of textContent to render HTML. Heres an excerpt from the documentation available at https://material.angularjs.org/latest/#mddialog-alert

$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize module to be loaded. HTML is not run through Angular's compiler.

score 0 · Answer 5 · answered Nov 14 '17 at 03:52

It seems a bit counter intuitive to use a template when you only need to inject one or two things in. To avoid using a template, you need to include 'ngSanitize' for it to work.

angular.module('myApp',['ngMaterial', 'ngSanitize'])
.controller('btnTest',function($mdDialog,$scope){
  var someHTML = "<font>This is a test</font>";
    $scope.showConfirm = function(ev) {
      // Appending dialog to document.body to cover sidenav in docs app
      var confirm = $mdDialog.confirm()
        .title('Please confirm the following')
        .htmlContent(someHTML)
        .ariaLabel('Lucky day')
        .targetEvent(ev)
        .ok('Please do it!')
        .cancel('Sounds like a scam');
      //Switch between .htmlContent and .textContent. You will see htmlContent doesn't display dialogbox, textContent does.         
      $mdDialog.show(confirm).then(function() {
        $scope.status = 'Saving Data';
      }, 
      function() {
        $scope.status = 'You decided to keep your debt.';
      });
    };

})

Notice the injected HTML:

var someHTML = "<font>This is a test</font>";

I found this example here.

score 0 · Answer 6 · answered Mar 09 '19 at 14:14

The latest version of Angular Material Design API has predefined function for add HTML content to the alert dialog:

an $mdDialogPreset with the chainable configuration methods:

$mdDialogPreset#title(string) - Sets the alert title.
$mdDialogPreset#textContent(string) - Sets the alert message.
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize module to be loaded. HTML is not run through Angular's compiler.
$mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
$mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
$mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option, the location of the click will be used as the starting point for the opening animation of the the dialog.

The link to the documentation: Angular MD API

Adding HTML content to angular material $mdDialog

6 Answers6