title: Applying dynamic styling to injected HTML in Angular 2
body: <p>For an Angular project I'm working on, I'm injecting HTML into a <code>&lt;div&gt;</code> like so:</p>
  
  <pre><code>&lt;div class="myClass" [innerHTML]="htmlToInsert"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The <code>htmlToInsert</code> contains a variety of things, notably <code>&lt;a&gt;</code> tags. Previously we were styling all these tags like so:</p>
  
  <pre><code>.myClass ::ng-deep a {
    color: #f00;
    text-decoration: none;
  }
  </code></pre>
  
  <p>And this worked fine. But now I need the color of these links to be dynamically generated during component initialization, based on data coming in from elsewhere. All of the dynamic styling I've seen in Angular requires you to apply things directly to the HTML tag, but we don't have them here to work with.</p>
  
  <p><strong>How can I apply dynamic styling to HTML that is also dynamically generated?</strong> Can I directly change the CSS class somehow? Would using a pipe be the correct approach here? Is there another method I don't know about? I could maybe refactor code if there is absolutely no other way of doing this.</p>