Angular 2 innerHTML ignoring form tags

Question

I am building out a modal for Angular 2 since there isn't a native one like angular 1.x :( and I'm making good progress. I've created a modal component that shows and hides and has an input for the body template. The only thing that isn't working is for some reason the form elements are being removed from the rendered html and I'm not sure why.

I have my parent component which includes this in it's template:

<cmg-modal #modal [body]='modalBody'></cmg-modal>

Here I am adding the modal, giving it a name and passing a variable for the body content.

Inside the parent components code we set the modal body to an HTML template.

private modalBody: any = require('../modal/templates/createProject.html');

Inside that template (createProject.html) I have the following code:

<div class='create-project-modal'>
  <h2>Create a new project</h2>
  <form>
    <input type='text' name='projectName' placeholder='Enter a project name'>
  </form>
  <h3>hello world</h3>
  <p>this is annoying</p>
</div>

Finally in the modals template file I bind the value of the body to the innerHTML of the body element.

<section class='body' [innerHTML]='body'></section>

However when I load the modal and inspect the element I only have the following HTML:

<section class='body' ng-reflect-inner-h-t-m-l='<div class="create-project-modal">&#10;  <h2>Create a new project</h2>&#10;  &#10;    &#10;  &#10;  <h3>hello world</h3>&#10;  <p>this is annoying</p>&#10;</div>&#10;'>
  <div class='create-project-modal'>
    <h2>Create a new project</h2>
    <h3>hello world</h3>
    <p>this is annoying</p>
  </div>
</section>

Where did the form go!?!

Answer 1

You can use DomSanitizer to mark your HTML as trusted so innerHTML won't strip anything.

See also In RC.1 some styles can't be added using binding syntax

Answer 2

For security reasons, innerHTML strips out form and input elements. This is to prevent web developers from making their sites vulnerable to XSS and other hacks. If you look on the console, there should be WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

You can look into dynamic component loading to achieve your end goal, but the Angular classes people have been using to do this, mainly DynamicComponentLoader and ComponentResolver, have been deprecated.