unwanted trigger of function in tr tag when clicking a button in row

Question

i have a table with a button on each row.

          <tbody>
            <tr *ngFor="let user of users" (click)="accountDetails(user._id)">

                <td>{{user.firstName | titlecase}} {{user.lastName | titlecase}}</td>
                <td>{{user.email}}</td>
                <td>{{user.mobile}}</td>
                <td">
                  <button type="button" class="btn btn-primary"
                    (click)="blockUnblock(user._id, 1)">UnBlock</button>
                </td>

            </tr>
          </tbody>

Here i have a click function in tag and one also in tag button.

I require to click on the row to execute accountDetails(), but on clicking the button also, the accountDetails() gets triggered alongwith blockUnblock().

how can i make the accountDetails() work, in rest of the row except on the button click

Answer 1

You can prevent propagation of the click event on parents by using Event.stopPropagation()

You can inline this method in your html in Angular:

(click)="blockUnblock(user._id, 1); $event.stopPropagation()"
                                    ^^^^^^^^^^^^^^^^^^^^^^^