Angular2 : Inject HTML from an array and render the view

Question

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?

Amadou Beye · Accepted Answer · 2017-05-20 14:00:33Z

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

answered May 20, 2017 at 14:00

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Tarasovs Over a year ago

what happens if I got angular class inside that HTML and I bind the HTML would it bind the event listeners also?

Amadou Beye Over a year ago

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)

Chris Tarasovs Over a year ago

$scope is angular 1, I am talking about angular 2 buddy :)

Amadou Beye Over a year ago

Okay take a look at this post: stackoverflow.com/questions/32340641/…

Collectives™ on Stack Overflow

Angular2 : Inject HTML from an array and render the view

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related