title: Inserting HTML from server into DOM with angular2 (general DOM manipulation in Angular2)
body: <p>I would like to insert some HTML that I retrieve from my server into a DOM element in angular2. I can't seem to figure out the best/correct way to do this.</p>
  
  <p>I can't just put {{my_data}} into a template because angular 2 will automatically escape the HTML.</p>
  
  <p>I have attempted to write an html-unsafe directive which just assigns a value directly to innerHTML of an element:</p>
  
  <pre><code>/// &lt;reference path="../../typings/typings.d.ts" /&gt;
  
  import {Directive} from 'angular2/angular2';
  import {ElementRef} from 'angular2/core';
  
  
  @Directive({
      selector: "[html-unsafe]",
      properties: ['htmlUnsafe']
  })
  export class HtmlUnsafe{
      constructor(private elem: ElementRef){
  
      }
  
      set htmlUnsafe(value){
          setTimeout(() =&gt; {
              this.elem.nativeElement.innerHTML = value;
          },0);
      }
  }
  </code></pre>
  
  <p>So now in my template I have something like</p>
  
  <pre><code>&lt;td [html-unsafe]="my_data"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>This works, but I am not sure it is the correct way to do this and the setTimeout seems like an odd workaround. Without the setTimeout it appears that <code>this.elem.nativeElement</code> does not actually refer to the DOM element but to some sort of temporary element. </p>
  
  <p>Is there a more "correct" angular2 way to simply insert HTML into the DOM? Why do I need to wrap the DOM manipulation in a setTimeout?</p>