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

Question

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

Check this out: w3schools.com/angular/tryit.asp?filename=try_ng_model_two-way , let me know if that's what you're looking for. — Manuel Azar
– Manuel Azar, Commented Aug 18, 2016 at 0:08
@omerfaruk Yes I think that is what I am looking for. I am not up on the terminology but that sounds like what I am looking for. — Lotus_8
– Lotus_8, Commented Aug 18, 2016 at 0:08
@ManuelAzar that is not quite what I am after. I have a car model in my app and I have a add car form to submit the car data to my data base. I want the user to be able to input HTML into the description field save it to the database and then be able to render that html with my <div>{{car.description}}</div>. I am not looking for a two way data binding I do not think. — Lotus_8
– Lotus_8, Commented Aug 18, 2016 at 0:13

Judson Terrell · Accepted Answer · 2016-08-18 00:15:10Z

1

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>

answered Aug 18, 2016 at 0:15

Judson Terrell

4,3262 gold badges32 silver badges51 bronze badges

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

2 Comments

Lotus_8 Over a year ago

Thank you this is what I am looking for. I am a bit of noob and sometimes it is hard to search for the answer without the right terminology.

Judson Terrell Over a year ago

No worries! Glad to help!

Collectives™ on Stack Overflow

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

Hello world
Hello Universe

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Hello world Hello Universe

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Hello world
Hello Universe