Event Binding

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:04

Event Binding

Curso de Angular 4

Clase 12 de 80

Clase 12 / 80

Recursos

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.

Mateo Santiago Zapata Maldonado

Hace 8 años

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.

Cristian Camilo Rodriguez

Hace 7 años

Interesante, no habran textos para leer sobre objetos del DOM?

Comentarios (26)26 comentarios

javier alejandro segovia

Hace 9 años

Eduardo de la Cruz Ibarra

Profesor

Joel Leal Lugo

Company_admin

Nelson Eduardo Visbal Jensen

Jorge Gens Abujas

Noé Muñoz

Ricardo Moreno

Juan Esteban Deossa Pertuz

Luis David López Berber

Jherom Chacon

Andrés Antonio Azuara Portillo

Juan Carlos Santamaria Villegas

Matias Cabido

Víctor Hugo Rivas Sánchez

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina