CursosEmpresasBlogLiveConfPrecios

Event Binding

Clase 12 de 80 • Curso de Angular 4

Clase anteriorSiguiente clase
Resumen

Aprende a dominar event binding en Angular con una guía directa y práctica. Verás cómo usar paréntesis para escuchar un clic y ejecutar una función en TypeScript, además de detectar errores típicos en el HTML con herramientas del navegador. Sin rodeos: aplica, prueba y corrige con confianza.

¿Qué es event binding en Angular y cómo se escribe?

El event binding conecta eventos del DOM con funciones de tu componente. Es muy similar al property binding, pero cambia la sintaxis: en lugar de corchetes, se usan paréntesis. Cuando ocurre el evento, se ejecuta la función que indiques.

  • Sintaxis con paréntesis en el HTML.
  • Ejemplo de evento: (click).
  • Al dispararse el evento, se llama a tu función.

¿Cómo implementar un (click) con una función TypeScript?

En el HTML, bindea el evento al nombre de la función. En el código de TypeScript, define esa función fuera del constructor y coloca la lógica dentro de llaves. Para que sea evidente, se muestra un alert con el texto “Haciendo algo”.

¿Cómo se ve el HTML con (click)?

<button (click)="hacerAlgo()">Click me</button>

¿Dónde defino la función en TypeScript?

// Fuera del constructor
hacerAlgo() {
  alert('Haciendo algo');
}
  • El evento (click) invoca hacerAlgo().
  • La función se declara como en JavaScript estándar.
  • El cuerpo va entre llaves y muestra un alert.

¿Cómo detectar y corregir errores comunes en event binding?

Angular puede mostrar mensajes de error extensos, pero el problema real suele estar en la primera línea del mensaje. Un caso típico: un paréntesis de cierre huérfano en el HTML rompe el render, incluso ocultando el texto del botón. Usa Chrome DevTools para inspeccionar y ajustar tu código.

  • Revisa el HTML: busca paréntesis que cierran sin abrir.
  • Si el botón no muestra su label, hay un error de plantilla.
  • Mensajes como “set attribute en el elemento” apuntan a sintaxis inválida.
  • Abre DevTools: clic derecho > Inspect o Control + Alt + I.
  • Corrige, guarda y refresca: el alert “Haciendo algo” debe aparecer al hacer clic.
  • Nota: mensajes ocasionales como “connection refused” pueden aparecer y no siempre son críticos.

Así manejas el event binding: paréntesis, evento y función asignada. Como adelanto, más adelante verás two-way data binding para combinar los tipos de bindeo.

¿Te surgieron dudas o te apareció otro error curioso? Compártelo en los comentarios y lo vemos juntos.