title: Angular 2 change the style of a button onClick
body: <p>I am having a lot of trouble trying to update the styling for a button on click.</p>
  
  <p>First, here is the original markup:</p>
  
  <pre><code>&lt;button class="btn btn-add" (click)="handleButtonClick(id)"&gt;
    Add&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>On clicking the button, I am trying to:</p>
  
  <ol>
  <li><p>Change the class from <code>"btn btn-add"</code> to <code>"btn btn-remove"</code></p></li>
  <li><p>Change the <code>&lt;i class="fa fa-plus-circle"&gt;</code> to <code>&lt;i class="fa fa-minus-circle"&gt;</code></p></li>
  </ol>
  
  <p>How can I do this the angular 2 way?  Right now I just added a boolean and flip that, and show different templates based on the value.  However, it seems there should be a way to handle this through some function right? In the documentation it says you can use strings delimited by a space for multiple classes, but I am not sure how to do that.</p>