title: ng-if or ng-class inside a string that translate into HTML
body: <p>This is a simple directive gets string that can be also html (I use html pipe so it is working fine):</p>
  
  <pre><code>&lt;div [my-directive]="'any string...'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Also this will render fine:</p>
  
  <pre><code>&lt;div [my-directive]="'&lt;div style=\'color:red;\'&gt;&lt;/div&gt;'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and also that will work great:</p>
  
  <pre><code>&lt;div [my-directive]="'&lt;div&gt;{{object.value}}&lt;/div&gt;'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>BUT if I will add ng-if or ng-class that will not work:</p>
  
  <pre><code>&lt;div [my-directive]="'&lt;div ng-if=\'object.value === \'OK\' \'&gt;&lt;/div&gt;'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and I don't understand why. Why {{ }} will render, but ng-* will not.</p>
  
  <p>The directive component takes the string and insret it as innerHTML:</p>
  
  <pre><code>template: &lt;div [innerHTML]="htmlStr"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the htmlStr is <code>SafeHtml</code>.</p>