Angular Material Components in Ng-Sweet-Alert-2

Question

I try to put an HTML code including Angular material input component (which is included in my project) in ng-sweet-alert dialog:

 var strVar="";
  strVar += "<div> <md-input-container style=\"padding-left:0px;\" flex=\"\">   

<label>Titel<\/label> <input ng-model=\"WBQuery.Titel\"> 
  <\/md-input-container> <\/div>";

swal({   
    title: 'HTML example',   
    html: strVar });
}

But what is shown is just the standard input field of HTML. Is there any (hacking) way to use angular material components in that dialog?

Answer 1

I've not tried it but you can try this. After you have invoked the swal function, try the following:

(Assuming you are doing it in a directive or a controller)

var element = angular.element(document.querySelector(".sweet-alert"));
$compile(element.contents())($scope);

If that doesn't work, try to put the above code in a $timeout service:

$timeout(function() {
    var element = angular.element(document.querySelector(".sweet-alert"));
    $compile(element.contents())($scope);
}, 2000);