Repaso del binding de propiedades y eventos
Enlace datos hacia los componentes y eventos desde ellos.
Repaso del binding de propiedades y eventos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Dos direcciones del flujo de datos
Las plantillas de Angular mueven los datos en dos direcciones: el enlace de propiedades envía datos al DOM y el enlace de eventos devuelve las acciones del usuario al componente.
Interpolación
La interpolación con dobles llaves muestra como texto un valor del componente. Es unidireccional, del componente a la vista.
<p>{{ title }}</p>
// component
title = "Dashboard";Sintaxis del enlace de propiedades
Los corchetes enlazan un valor del componente con la propiedad de un elemento o componente. La expresión de la derecha se evalúa y se asigna.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Enlazar con entradas de componentes
El enlace de propiedades también proporciona valores a las propiedades @Input de los componentes secundarios.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Atributo frente a propiedad
El enlace de propiedades apunta a las propiedades del DOM, no a los atributos HTML. Para usar atributos directamente, utilice el prefijo attr..
<button [attr.aria-label]="label">Save</button>Sintaxis del enlace de eventos
Los paréntesis enlazan un evento del DOM con un método del componente. El método se ejecuta cuando se produce el evento.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }El objeto $event
La variable especial $event transporta la información del evento hasta su controlador.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Enlazar con salidas de componentes
El enlace de eventos también escucha los eventos @Output de los componentes secundarios, emitidos mediante un EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Combinar ambos enlaces
Usar el enlace de propiedades y el enlace de eventos juntos en la misma propiedad es la base del enlace bidireccional, que verá a continuación.
<input [value]="name" (input)="name = $event.target.value">Enlaces de clases y estilos
Los enlaces de propiedades especiales alternan clases y estilos según el estado del componente.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Mantener las plantillas declarativas
Los enlaces mantienen declarativa la relación entre los datos y la vista. Angular actualiza el DOM automáticamente cuando cambian los valores enlazados.
Comprobación rápida
Compruebe su comprensión del enlace de propiedades y eventos.
Resumen
El enlace de propiedades [prop] envía datos a la vista, el enlace de eventos (event) devuelve las acciones y la interpolación muestra texto. Combinar un enlace de propiedades y uno de eventos sobre el mismo valor configura un enlace bidireccional.
Preguntas frecuentes
¿La lección «Repaso del binding de propiedades y eventos» es gratis?
Sí — el texto completo de «Repaso del binding de propiedades y eventos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Repaso del binding de propiedades y eventos»?
Enlace datos hacia los componentes y eventos desde ellos. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Repaso del binding de propiedades y eventos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Repaso del binding de propiedades y eventos
- Binding bidireccional con ngModel
- Inputs de señales model()
- Propiedades personalizadas con binding bidireccional