0

I building a basic drag and drop that has various prepared HTML that you can drag and drop into the page.

I got a object with the list of HTML that you can drag

element=[
 text: {html: '<p> asdasdasdas</p>'},
 list: {html: '<ul><li></li></ul>'};
 img: {html: '<img src="placeholder.jpg"/>'}
]

How to inject the html into the page?

Or should I be creating the HTML snippets as component and than having a referenced in the elements object to the component selector and injecting the angular selector and rendering the view?

Chris Tarasovs
  • 703
  • 2
  • 21
  • 54

1 Answers1

1

You can use ng-bind-html to bind html

<div ng-bind-html="element.text.html"></div>
<div ng-bind-html="element.list.html"></div>
<div ng-bind-html="element.img.html"></div>

Notice: You have to include ngSanitize module on your app in order to use ng-bind-html

Amadou Beye
  • 2,538
  • 3
  • 16
  • 37
  • what happens if I got angular class inside that HTML and I bind the HTML would it bind the event listeners also? – Chris Tarasovs May 20 '17 at 14:08
  • You have to inject $sce to your controller and then set your html with trustAsHtml function. Example: `$scope.htmlText = $sce.trustAsHtml($scope.element.text.html)` – Amadou Beye May 20 '17 at 15:05
  • $scope is angular 1, I am talking about angular 2 buddy :) – Chris Tarasovs May 20 '17 at 15:06
  • Okay take a look at this post: http://stackoverflow.com/questions/32340641/angular-2-equivalent-of-ng-bind-html-sce-trustashtml-and-compile – Amadou Beye May 20 '17 at 15:20