title: assign angular theme classname with a variable
body: <p>I have 4 themes the I allow the user to select from for my angular app. I then want to assign the string corresponding to that theme to the main div that contains the app. I can do it manually by changing</p>
  
  <pre><code>&lt;div class="dark-theme"&gt; or
  &lt;div class="default-theme"&gt; etc.
  </code></pre>
  
  <p>What I want to be able to do is set the classname for the theme from a variable I pull from the app-settings. e.g.
  (component.ts)</p>
  
  <pre><code>this.theme = this.settings.theme
  </code></pre>
  
  <p>(component.html)</p>
  
  <pre><code>&lt;div class={{theme}}&gt;
  </code></pre>
  
  <p>I've tried [ngClass], [className], {{theme}}, '{{theme}}' and a bunch of other variations but nothing work. I know I'm passing the correct theme name to the html since I can also display it in a \p> element. All the reading I've done keeps referring to using a conditional with ngClass. Are you not able to just assign the string directly from the contents/value of a string variable in the component typescript?</p>
  
  <p>Thanks....</p>