Lotus_8 Lotus_8 - 3 months ago 12
HTML Question

Angular.JS take form input and convert that string to HTML

I am working on a CRUD app built with the mean MEAN stack and I want the user to be able to enter in some basic HTML into a form field and have it render on the page. For example when the user fills out description field I want them to be able to enter a string like:

"<h2>Hello world <br> Hello Universe</h2>"


and have it remove the quotes so it renders the html. So when I put {{model.description}} into my HTML page it renders the HTML.

Hello world
Hello Universe


Answer

PLUNK: https://plnkr.co/edit/WIeDIdjzi0bXsQxHipuu?p=preview

 <!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
    <script>
      angular.module('mySceApp', ['ngSanitize'])

    </script>
  </head>

  <body ng-app="mySceApp">
    <p>Enter your html below.</p>
<input ng-model="userHtml" aria-label="User input">
<div ng-bind-html="userHtml"></div>
  </body>
  </html>
Comments