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
    el 19 nov. 2021 a las 10:47

Tu Respuesta

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

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