Propiedades personalizadas con binding bidireccional
Exponga sus propios inputs compatibles con binding bidireccional.
Propiedades personalizadas con binding bidireccional es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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.
Enlace bidireccional personalizado
Puede hacer que cualquier propiedad de un componente admita el enlace bidireccional. Angular admite dos enfoques: el par clásico @Input más @Output, o el signal moderno model().
La convención de nombres
Para que funcione el enlace bidireccional, el nombre del output debe ser el nombre del input más el sufijo Change. Por ejemplo, el input size necesita el output sizeChange.
Declarar el input
Comience con un input normal que el componente padre pueda establecer.
import { Input } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
}Declarar el output correspondiente
Añada un EventEmitter @Output cuyo nombre incluya el sufijo Change.
import { Input, Output, EventEmitter } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
}Emitir al actualizar
Cuando el componente cambie el valor internamente, actualice la propiedad y emita el nuevo valor para que el componente padre permanezca sincronizado.
setValue(v: number) {
this.value = v;
this.valueChange.emit(v);
}Enlazar desde el componente padre
Ahora el componente padre puede usar la sintaxis banana-in-a-box con su propiedad personalizada.
<app-rating [(value)]="score"></app-rating>
// parent
score = 3;Ejemplo completo de input/output
Aquí tiene un componente completo que admite el enlace bidireccional personalizado mediante la API clásica.
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
bump() {
this.value++;
this.valueChange.emit(this.value);
}
}El enfoque moderno con model
El mismo comportamiento requiere mucho menos código con model(), que crea el par de input y output por usted.
import { model } from "@angular/core";
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
value = model(0);
bump() { this.value.update(v => v + 1); }
}Comparar los dos enfoques
El par clásico es explícito y funciona en todas partes; model() es conciso y se basa en signals. Ambos exponen el mismo enlace [(value)] a los componentes padre.
Varias propiedades bidireccionales
Un componente puede exponer varias propiedades enlazables bidireccionalmente, cada una siguiendo la convención input/inputChange.
@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();Elegir un enfoque
Para código nuevo, prefiera model() por su concisión e integración con signals. Use el par explícito de input/output cuando necesite un control detallado o no utilice signals.
Comprobación rápida
Compruebe su comprensión de las propiedades personalizadas enlazables bidireccionalmente.
Resumen
El enlace bidireccional personalizado necesita un input más un output llamado inputChange, que debe emitir en cada actualización. El signal moderno model() crea ese par automáticamente y es la opción concisa para código nuevo.
Preguntas frecuentes
¿La lección «Propiedades personalizadas con binding bidireccional» es gratis?
Sí — el texto completo de «Propiedades personalizadas con binding bidireccional» 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 «Propiedades personalizadas con binding bidireccional»?
Exponga sus propios inputs compatibles con binding bidireccional. 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 4 de 4.
¿Cuánto tiempo toma la lección «Propiedades personalizadas con binding bidireccional»?
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