单击事件更改按钮文本和样式上的Angular 4

Question

I have a component with the following methods

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');
  }

And on the html template i have

<button 
 (click)="onProductAdded(product)"
 *ngIf="!productIsOnImportList"
 class="ui labeled icon blue button">
 <i class="plus icon"></i>
  Add to Import List
</button>
<button 
 (click)="onProductRemoved(product)"
 *ngIf="productIsOnImportList"
 class="ui labeled icon red button">
 <i class="minus icon"></i>
  Remove 
</button>

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?

Answer 1

You can simply using $event to achieve this instead of having two separate buttons

onProductAdded(event){
    if(event.srcElement.innerHTML ==='Add to Import List' ){
      //// perform add action
      event.srcElement.innerHTML="Remove";
    } else if(event.srcElement.innerHTML ==='Remove'){
      //// perform remove action
      event.srcElement.innerHTML="Add to Import List";
    }

  }

HTML

<button (click)="onProductAdded($event)">Add to Import List</button>

Update 1 : Based on comment for the font-awesome icon

onProductAdded(event){
if(event.srcElement.childNodes[1].textContent === 'Add to Import List' ){
  //// perform add action
  event.srcElement.childNodes[0].classList.remove('fa-plus');
  event.srcElement.childNodes[0].classList.add('fa-times');
  event.srcElement.childNodes[1].textContent="Remove";
} else if(event.srcElement.innerText ==='Remove'){
  //// perform remove action
  event.srcElement.childNodes[0].classList.add('fa-plus');
  event.srcElement.childNodes[0].classList.remove('fa-times');
  event.srcElement.childNodes[1].textContent="Add to Import List";
}
}

Note : Live Demo is also updated.

LIVE DEMO

Answer 2

I resolved it by adding a boolean variable to my model class.

export interface ImportList {
  id: number;
  added?: boolean;
}

then on the component class I changed the methods to

onProductAdded(product: ImportList) { // Add an Item to ImportList
   // after some logic add product to ImportList

    //this.importList.push(product);
    product.added = true;
    console.log('product added');
  }

onProductRemoved(product: ImportList) {
    product.added = false;
    console.log('product removed');
  }

And in the template i did this.

<button 
 (click)="onProductAdded(product)"
 *ngIf="!product.added"
 class="ui labeled icon blue button">
 <i class="plus icon"></i>
  Add to Import List
</button>
<button 
 (click)="onProductRemoved(product)"
 *ngIf="product.added"
 class="ui labeled icon red button">
 <i class="minus icon"></i>
  Remove 
</button>

By doing this I was able to listen to clicks on individual products. I hope this helps someone.