如何识别点击，表示已经点击了哪个按钮

Question

am using angular 6.

In customer list page i have 3 buttons, "NEW", "EDIT" ,"VIEW". It will render to 1 component.

So i need to identify which button has been clicked so according to that i will change my page.

I am passing each row as a parameter.

component.html

---

<button mat-icon-button 
        matTooltip="Click to View" 
        (click)="viewCustomer(row)" 
        class="iconbutton" 
        color="primary">
  <mat-icon>visibility</mat-icon>
</button>
<button mat-icon-button 
        matTooltip="Click to Edit" 
        (click)="editCustomer(row)" 
        class="iconbutton" 
        color="primary">
  <mat-icon>edit</mat-icon>
</button>

common component

---

viewCustomer(customer) {
  console.log(event.target);
  this.service.populateForm(customer);
  const dialogConfig = new MatDialogConfig();
  // dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.width = '60%';
  this.dialog.open(CustomerComponent,dialogConfig);
}

Answer 1

You can simply pass 2nd argument in the click event like this:

(click)="viewCustomer(row,'view')"
(click)="viewCustomer(row,'edit')"

and check condition in you component ts file

viewCustomer(row, type){
if(type=== 'view'){
  //logic here
} else if(type === 'edit') { 
  //other logic here
}