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 ?

Solution

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>

Comments

[eko]

Have you tried event.stopPropagation();?

[Foo Bar]

DUPLICATE question answered here

[Imad El Hitti]

@FooBar in fact thats exactly the same question and the answer worked for me just tried it. But couldn't find his question as title of the question was not obvious for me

[Foo Bar]

@ImadElHitti totally comprensible, wasn't easy to look for.

[Foo Bar]

@sainu this was already resolved in comments, this is a duplicate question. Thank you for your effort.

[jgritten]

Just what I needed. Thank you