title: Changing style class attributes dynamically in Angular 6
body: <p>I have the following code in Angular 6:</p>
  
  <pre><code>&lt;div [innerHtml]="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I get the <code>content</code> variable from a service call (i.e. an external library). It contains class names, such as <code>p1</code>:</p>
  
  <pre><code>var content = '&lt;p class="p1"&gt;This is some text&lt;/p&gt;';
  </code></pre>
  
  <p>Now, I'm migrating this code from AngularJS. In AngularJS, I used to manipulate css classes like <code>p1</code> in the directive template:</p>
  
  <pre><code>.p1 {
     font-family: {{theFamily}};
  }
  </code></pre>
  
  <p>But when I try to do the same in the Angular 6 component style sheet, I get <code>Module build failed: Syntax Error</code>.</p>
  
  <p>Any ideas how to obtain the same result?</p>
  
  <p><strong>UPDATE</strong>
  Please see this <a href="https://stackblitz.com/edit/angular-inner-html-djlm3k" rel="nofollow noreferrer">StackBlitz</a>, it does not work because it doesn't accept <code>{{ }}</code> in the css. This worked in AngularJS.</p>