CODEWITHSUNDEEP
javascripthtmlangularjs
Lotus_8
Lotus_8

Reputation: 199

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

Upvotes: 1

Views: 547

Answers (1)

Judson Terrell
Judson Terrell

Reputation: 4306

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

 <!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" 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>

Upvotes: 1

Related Questions