Input signal model()
Crei binding bidirezionali con i signal model.
Input signal model() è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
I signals incontrano il two-way binding
Angular moderno offre model(), un approccio basato sui signal per creare input associabili in entrambe le direzioni senza coppie input/output gestite manualmente.
Dichiarazione di un model Input
Chiami model() per creare un signal scrivibile a cui il componente padre può associarsi in entrambe le direzioni.
import { Component, model } from "@angular/core";
@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
checked = model(false);
}Binding dal componente padre
Il componente padre usa la sintassi banana-in-a-box con il nome del model, esattamente come con ngModel.
<app-toggle [(checked)]="isOn"></app-toggle>
// parent
isOn = signal(true);Lettura del valore di un model
Un model è un signal, quindi lo legga chiamandolo come una funzione.
export class ToggleComponent {
checked = model(false);
describe() {
return this.checked() ? "on" : "off";
}
}Scrittura in un model
Aggiorni un model con set o update. La modifica viene propagata automaticamente al componente padre.
toggle() {
this.checked.update(c => !c);
}
// or
turnOn() {
this.checked.set(true);
}Input model obbligatori
Usi model.required() quando il componente padre deve fornire un valore.
import { model } from "@angular/core";
export class FieldComponent {
value = model.required<string>();
}Uso di model nel template
Associ direttamente il signal model nel template del componente; chiamandolo ottiene il valore corrente.
@Component({
selector: "app-toggle",
template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
checked = model(false);
flip() { this.checked.update(v => !v); }
}Nessun output manuale necessario
Con model() non deve dichiarare un @Output separato. Angular configura automaticamente l'evento di modifica usando il nome convenzionale più Change.
model e input a confronto
Un semplice input() è di sola lettura all'interno del componente, mentre un model() è scrivibile e supporta il two-way binding verso il componente padre.
// read-only:
label = input("");
// two-way writable:
value = model("");Un contatore con model
Ecco un contatore autonomo il cui valore rimane sincronizzato con il 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); }
}Quando usare model
Usi model() quando un componente figlio gestisce un valore che anche il componente padre deve poter leggere e aggiornare, ad esempio nei controlli di moduli personalizzati, negli interruttori e negli slider.
Verifica rapida
Verifichi la Sua comprensione degli input signal model.
Riepilogo
La funzione model() crea un signal scrivibile che supporta il two-way binding senza una coppia input/output manuale. Lo legga chiamandolo, lo scriva con set o update e vi si associ dal componente padre con [(name)].
Domande Frequenti
La lezione «Input signal model()» è gratuita?
Sì — il testo completo di «Input signal model()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Input signal model()»?
Crei binding bidirezionali con i signal model. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Input signal model()»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Riepilogo del binding di proprietà ed eventi
- Binding bidirezionale con ngModel
- Input signal model()
- Proprietà personalizzate con binding bidirezionale