title: Angular 2 how do I use a variable for the value of ngClass
body: <p>I want to use a variable for the value of ngClass that will be added to the class list. My use case is that I have a collection of image sprites, there is the base sprite and then an active state which has the same filename as the base sprite only with '-active' added to the end. I add the sprites to the document by giving an element a class matching the desired sprites file name. I need to toggle back and forth between the two sprites when a user hovers over the element. How do I do that?</p>
  
  <p>For example something like this (NOTE: tool.name === the file name of the sprite to display):</p>
  
  <pre><code>&lt;li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'&gt;
    &lt;span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'&gt;{{tool.name}}&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>