title: Angular - modify innerHTML
body: <p>I need to change the innerHTML of an element and I've decided to create an attribute directive to accomplish this task. 
  I have created the following example to illustrate what I'm basically trying to do:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-u9dapl" rel="nofollow noreferrer">StackBlitz</a></p>
  
  <p>I have used interpolation to set the content of a paragraph:</p>
  
  <pre><code>&lt;p changeContentDirective&gt;{{content}}&lt;/p&gt;
  </code></pre>
  
  <p>The 'changeContentDirective' modifies the innerHTML of the paragraph if the use hovers over it.</p>
  
  <pre><code>this.el.nativeElement.innerHTML = 'modified by directive';
  </code></pre>
  
  <p>I had also set a function to execute after 5s that will change the value of the 'content' property:</p>
  
  <pre><code>ngOnInit() {
      setTimeout(() =&gt; {
        console.log('timeout: modify content');
        this.content = 'modifed after timeout'
      }, 5000);
    }
  </code></pre>
  
  <p>If I don't hover over the paragraph, the content is being changed after 5s. The strange part is that the content is not modified by the handler from setTimeout if I hover over the element (obviously before the handler gets executed)</p>
  
  <p>I'm not sure why this is happening, it seems that after I modify the innerHTML programmatically, changing the 'content' property from the AppComponent doesn't have any effect on the html displayed by the paragraph.</p>
  
  <p>In the actual application I'm working on, the structure is more complex, I don't have to modify the innerHTML of a paragraph, but the innerHTML of different td's that belong to a table (Kendo Grid), because of this I don't think I can use a pipe.</p>
  
  <p>My question is whether I can modify the innerHTML of an element in a directive by accessing the native element and also why this strange issue occurs?</p>
  
  <p>Thanks in advance</p>