title: Angular 5 - Directive ngClass and ngStyle innerHTML
body: <p>I am trying to dynamically change a directive style/class.  For some reason angular is not creating the binding when I change the innerHTML with ngStyle or ngClass.  Eventually what I would like to do is wherever I place this directive I want the background color to update based on a service variable.  For simplicity sakes, I created an example that is not even rendering my hard coded ngStyle background-color.</p>
  
  <p>In the example I have a simple directive that does this that I'm loading on the app component. I don't understand why this line doesn't make the background color green. </p>
  
  <pre><code>  this.element.nativeElement.innerHTML = `&lt;div [ngStyle]="{'background-color': 'green'}"&gt; BG Color should be green. But its not.  `;
  </code></pre>
  
  <p>Here is the stackblitz: </p>
  
  <p><a href="https://stackblitz.com/edit/angular-xcgnmh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-xcgnmh</a></p>
  
  <p>What am I missing? Or is there a better way to be able to do this? I have tried using outputs, looked at event emitters but they havent helped. </p>