Angular2 Clickable table row, except last cell

Question

I have a table with data, and my last cell is a delete button to be able to delete a row.

The problem I'm facing is that my rows are clickable which take me to another page to edit the element, and so when I click the delete button, it deletes the element but also takes me to the edit page.

Here is my code :

<table class="data-table-format">
  <thead>
    <tr>
      <th>id</th>
      <th>Maker</th>
      <th>Model</th>
      <th>Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)">
      <th>{{ car.car_id }}</th>
      <td>{{ car.car_maker }}</td>
      <td>{{ car.car_model }}</td>
      <td>{{ car.car_year }}</td>
      <td><i class="material-icons" style="color:red" (click)="deleteCar(car.car_id)">delete_forever</i></td>
    </tr>
  </tbody>
</table>

Any suggestion on how to do it with angular/typescript ?

Answer 1

You can try this. This is not jQuery

 <tbody>
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)">
      <th>{{ car.car_id }}</th>
      <td>{{ car.car_maker }}</td>
      <td>{{ car.car_model }}</td>
      <td>{{ car.car_year }}</td>
      <td><i class="material-icons" style="color:red" (click)="$event.stopPropagation();deleteCar(car.car_id)">delete_forever</i></td>
    </tr>
  </tbody>