Angular 2 change the style of a button onClick
<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>