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 ?

is that jQuery ? I would like to avoid jQuery if it's possible — Imad El Hitti, Jun 02 '17 at 09:40
DUPLICATE question [answered here](https://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation) — Foo Bar, Jun 02 '17 at 09:44
@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 — Imad El Hitti, Jun 02 '17 at 09:49

score 36 · Accepted Answer · answered Jun 02 '17 at 09:48

36

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>

answered Jun 02 '17 at 09:48

sainu

2,686
3
22
41

2

@sainu this was already resolved in comments, this is a duplicate question. Thank you for your effort. – Foo Bar Jun 02 '17 at 09:52
Just what I needed. Thank you – jgritten Nov 17 '17 at 20:48

Angular2 Clickable table row, except last cell

1 Answers1