Inputs de señales model()
Cree bindings bidireccionales con señales model.
Inputs de señales model() es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Los signals se unen al enlace bidireccional
Angular moderno ofrece model(), una forma basada en signals de crear inputs enlazables bidireccionalmente sin pares manuales de input/output.
Declarar un input model
Llame a model() para crear un signal modificable al que el componente padre pueda enlazarse bidireccionalmente.
import { Component, model } from "@angular/core";
@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
checked = model(false);
}Enlazar desde un componente padre
El componente padre usa la sintaxis banana-in-a-box con el nombre del model, exactamente igual que con ngModel.
<app-toggle [(checked)]="isOn"></app-toggle>
// parent
isOn = signal(true);Leer un valor model
Un model es un signal, por lo que debe leerlo llamándolo como una función.
export class ToggleComponent {
checked = model(false);
describe() {
return this.checked() ? "on" : "off";
}
}Escribir en un model
Actualice un model con set o update. El cambio se propaga automáticamente al componente padre.
toggle() {
this.checked.update(c => !c);
}
// or
turnOn() {
this.checked.set(true);
}Inputs model obligatorios
Use model.required() cuando el componente padre deba proporcionar un valor.
import { model } from "@angular/core";
export class FieldComponent {
value = model.required<string>();
}Usar model en la plantilla
Enlace directamente el signal model en la propia plantilla del componente; al llamarlo, obtiene el valor actual.
@Component({
selector: "app-toggle",
template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
checked = model(false);
flip() { this.checked.update(v => !v); }
}No se necesita un output manual
Con model() no debe declarar un @Output independiente. Angular configura el evento de cambio por usted usando el nombre de la convención más Change.
model frente a input
Un input() normal es de solo lectura dentro del componente, mientras que un model() se puede modificar y admite el enlace bidireccional con el componente padre.
// read-only:
label = input("");
// two-way writable:
value = model("");Un contador con model
Aquí tiene un contador autónomo cuyo valor permanece sincronizado con el componente padre.
@Component({
selector: "app-counter",
template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
count = model(0);
inc() { this.count.update(c => c + 1); }
}Cuándo recurrir a model
Use model() cuando un componente secundario controle un valor que el componente padre también quiera leer y actualizar, como en controles de formulario personalizados, interruptores y controles deslizantes.
Comprobación rápida
Compruebe su comprensión de los inputs de signal model.
Resumen
La función model() crea un signal modificable que admite el enlace bidireccional sin un par manual de input/output. Léalo llamándolo, escríbalo con set o update y enlácelo desde el componente padre con [(name)].
Preguntas frecuentes
¿La lección «Inputs de señales model()» es gratis?
Sí — el texto completo de «Inputs de señales model()» 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 «Inputs de señales model()»?
Cree bindings bidireccionales con señales model. 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 3 de 4.
¿Cuánto tiempo toma la lección «Inputs de señales model()»?
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