2

Tengo una tabla de datos hecha en Angular con TypeScript del siguiente estilo:

+----------+------------+------------+------------+
|          | ID         | Nombre     | Apellido   |
+----------+------------+------------+------------+
| [Button] | 00001      | Nom        | Ape        |
+----------+------------+------------+------------+

Formada por el siguiente código:

<table>
  <thead>
    <th> </th>
    <th> ID </th>
    <th> Nombre </th>
    <th> Apellido </th>
  </thead>
  <tbody>
    <tr (click)="ComprobarCustomer(customer.id)" *ngFor="let customer of customerList">
      <td> 
        <button click="checkCustomer()"> 
          <fa-icon ... ></fa-icon>
        </button>
      </td>
      <td> {{customer.id}} </td>
      <td> {{customer.name}} </td>
      <td> {{customer.lastName}} </td>
    </tr>
  </tbody>
</table>

Necesito que el botón no accione el evento click que contiene la etiqueta <tr> de alguna forma que no implique quitar el evento de la línea y ponerlo en cada una de las celdas.

1

1 respuesta 1

2

En angular puedes acceder al evento con la variable $event.

<table class="table">
  <thead>
    <th></th>
    <th>ID</th>
    <th>Nombre</th>
    <th>Apellido</th>
  </thead>
  <tbody>
    <tr
      (click)="ComprobarCustomer(customer.id)"
      *ngFor="let customer of customerList"
    >
      <td>
        <button
          (click)="checkCustomer($event, customer)"
          class="btn btn-outline-dark"
        >
          fa-icon
        </button>
      </td>
      <td>{{ customer.id }}</td>
      <td>{{ customer.name }}</td>
      <td>{{ customer.lastName }}</td>
    </tr>
  </tbody>
</table>

En tu component.ts detienes la propagación del evento.

 ComprobarCustomer(id: string) {
    console.log('Comprobar customer id:', id);
  }

  checkCustomer(event, customer) {
    event.stopPropagation();
    console.log({ customer });
  }

Te dejo un ejemplo funcional aqui

1
  • Era justo lo que estaba buscando, muchas gracias.
    – Aritz
    Commented el 19 nov. 2021 a las 10:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.