title: Angular 4 on click event change button text and style
body: <p>I have a component with the following methods</p>
  
  <pre><code>onProductAdded(product: ImportList) { // Add an Item to ImportList
     // after some logic add product to ImportList
      this.productIsOnImportList = true;
      console.log('product added');
    }
  
    onProductRemoved(product: ImportList) {
      this.productIsOnImportList = false;
      console.log('product removed');
    }
  </code></pre>
  
  <p>And on the html template i have </p>
  
  <pre><code>&lt;button 
   (click)="onProductAdded(product)"
   *ngIf="!productIsOnImportList"
   class="ui labeled icon blue button"&gt;
   &lt;i class="plus icon"&gt;&lt;/i&gt;
    Add to Import List
  &lt;/button&gt;
  &lt;button 
   (click)="onProductRemoved(product)"
   *ngIf="productIsOnImportList"
   class="ui labeled icon red button"&gt;
   &lt;i class="minus icon"&gt;&lt;/i&gt;
    Remove 
  &lt;/button&gt;
  </code></pre>
  
  <p>The problem is right now the behavior is global, the click affects all products but i want the click to be private to individual product. How can I achieve this?</p>