Avoid clicking on a table row

Question

I have included the button in the row of the table. but I want to handle the onClick event for them separately. But when I click the button, the table row click event also fires. As soon as only the button click element is activated when the button is pressed. Here is the code I'm currently using

<table class="table" style="width:100%;">
      <div  *ngFor="let data of Data; let j = index;">
            <tr [ngClass]="{onClickMember: data .clicked}" (click)="addData(data , j)">                
              <td width="15%">{{member.name}}</td>
                 <td width="15%"><button class="role-toggle" (click)="changeData(data , j)">{{data .role}}</button></td>

              </tr>
     </div>
</table>

Answer 1

You can pass a special object $eventto your (click) function.

<button class="role-toggle" (click)="changeData($event, data , j)>

Catch an event in the code and stop protagonizing

changeData(event, data, j) {
   event.stopPropagation()
}