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.
¿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'); }
¿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.
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.
javier alejandro segovia
Super me gusto. hasta hice un contador muy facil que react handleClick.
<h2>{clickeado}</h2> <button [disabled]=“listo” (click)=“click()”>Click me!</button> clickeado = 0; click() { this.clickeado += +1; }javier alejandro segovia
click() {
this.clickeado += 1;
}
Eduardo de la Cruz Ibarra
ProfesorExcelente! De hecho más adelante en el curso haremos algo parecido 😄
Tipos de Data Binding, desde mi punto de vista...
String Interpolation: Intercambiar o reemplazar una etiqueta en especifica de un .textContent de un elemento del DOM por un dato relevante, es algo parecido al 'replace' de el objeto String:
String.replace("{{etiqueta}}", "dato relevante)
Y todo esto funciona automaticamente.
Property Binding: Todos los elementos o objetos del DOM tienen propiedades, ya que esto se denomina como un Mapa de Objetos.
Digamos una etiqueta button tiene un mapa de propiedades, como por ejemplo [class, style, disabled] y lo que hace Angular es buscar dentro de sus propiedades de ese elemento los que comiencen por [ y terminen en ] despues Interpola a un evento real le quita los corchetes lo convierte en uno interpretable por el navegador e imprime el evento en el "back" o en Typescript para su ejecucion.
Y todo esto funciona de forma automatica.
Event Binding: Igual al property Binding pero esta vez no busca [] si no parentesis () y esto los reemplaza y por ejemplo si colocamos (click) lo convierte a onClick y se lo inyecta al elemento dentro del DOM con la logica encontrada en typescript y esto si lo comprende el navegador.
En resumidas cuentas Event Binding y Property Binding son lo mismo porque onClick y Disabled son propiedades que cambian de forma automatica.
Puedo estar equivocado, pero bajo mis conocimientos es lo que interpreto.
Nelson Eduardo Visbal Jensen
Otros Event Binding que he usado son:
(keyup.ENTER) = “queHacerAlOprimirEnter();”
(keyup) = “queHacerAlOprimirCualquierTecla();”
Jorge Gens Abujas
Guau. Esto unido a las bases de datos me va a resultar verdaderamente grandioso 😃
Noé Muñoz
Hasta el momento he entendido súper bien, y lo bueno es que las lecciones son cortas, 😃
Ricardo Moreno
Hice un botón para hacer toggle con el [disabled], solo por diversión.
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Bienvenido a {{ title }}! </h1> <hr> <button [disabled]="listo" (click)="hacerAlgo()">Click me!</button> <button class="on-off" (click)="toggleButton()">On/Off</button> </div>
toggleButton() { this.listo ? this.listo = false : this.listo = true }
Juan Esteban Deossa Pertuz
Luis David López Berber
Excelente Observacion
Jherom Chacon
Bindeando a un evento de un control html
Jherom Chacon
Event binding
Jherom Chacon
Inspeccionando un error desde la consola de Chrome
Jherom Chacon
Bindeando desde un evento del html hacia un evento en el TS
Jherom Chacon
Aclaración de lo que es Property binding
Jherom Chacon
El event binding es la manera que tenemos de conectarnos a nuestro TS a partir de un evento de un control Html.
Cuando conectamos podemos conectarnos a una propiedad del TS o a un evento, esto nos permite ejecutar código en el TS desde el HTML.
Jherom Chacon
Resumen
Andrés Antonio Azuara Portillo
hacerAlgo you declared like hacerAlgo() and you said it's a simple javascript declaration, but in javascript you write a function: function hacerAlgo or var hacerAlgo = ()
Juan Carlos Santamaria Villegas
Que bueno leer los aportes de los demás compañeros de hecho realice sus ejemplos para no quedarme atras.
<button [disabled]="!listo" (click)="hacerAlgo()" (keyup.ENTER)="hacerAlgo()"> Click Me</button> <input type="text" name="nombredelacaja" placeholder="digite algo:" (keyup) = "calcularDatos()"> <textarea (keyup.ENTER)="hacerAlgo()" </textarea>
hacerAlgo(){
alert(‘haciendo algo!’);
}
calcularDatos(){
alert(this.a+this.b);
}
Matias Cabido
en los videos 10 y 11 en el punto de event Biding esta colocado [] y en este video cambio a ().
pueden corregir eso, por favor
Víctor Hugo Rivas Sánchez
Event Biding: Captura eventos en HTML para ejecutar alguna funcion en TS
