Riepilogo del binding di proprietà ed eventi
Colleghi i dati in ingresso e gli eventi in uscita dai componenti.
Riepilogo del binding di proprietà ed eventi è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Due direzioni del flusso dei dati
I template Angular spostano i dati in due direzioni: il property binding trasferisce i dati al DOM, mentre l'event binding invia le azioni dell'utente al componente.
Interpolazione
L'interpolazione con doppie parentesi graffe visualizza come testo un valore del componente. È unidirezionale: dal componente alla view.
<p>{{ title }}</p>
// component
title = "Dashboard";Sintassi del property binding
Le parentesi quadre associano un valore del componente alla proprietà di un elemento o di un componente. L'espressione a destra viene valutata e assegnata.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Binding agli input dei componenti
Il property binding trasferisce i valori anche alle proprietà @Input dei componenti figli.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Attributo e proprietà a confronto
Il property binding si applica alle proprietà del DOM, non agli attributi HTML. Per gli attributi puri usi il prefisso attr..
<button [attr.aria-label]="label">Save</button>Sintassi dell'event binding
Le parentesi associano un evento DOM a un metodo del componente. Il metodo viene eseguito quando si verifica l'evento.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }L'oggetto $event
La variabile speciale $event trasferisce il payload dell'evento al gestore.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Binding agli output dei componenti
L'event binding ascolta anche gli eventi @Output dei componenti figli, emessi tramite un EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Combinazione dei due binding
L'uso combinato di property binding ed event binding sulla stessa proprietà è alla base del two-way binding, che vedrà nella prossima sezione.
<input [value]="name" (input)="name = $event.target.value">Binding di classi e stili
Speciali property binding attivano o disattivano classi e stili in base allo stato del componente.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Mantenere i template dichiarativi
I binding mantengono dichiarativa la relazione tra dati e view. Angular aggiorna automaticamente il DOM quando cambiano i valori associati.
Verifica rapida
Verifichi la Sua comprensione del property binding e dell'event binding.
Riepilogo
Il property binding [prop] trasferisce i dati alla view, l'event binding (event) invia le azioni al componente e l'interpolazione visualizza il testo. La combinazione di property binding ed event binding sullo stesso valore configura il two-way binding.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 38
- Lezioni
- 144
Domande Frequenti
La lezione «Riepilogo del binding di proprietà ed eventi» è gratuita?
Sì — il testo completo di «Riepilogo del binding di proprietà ed eventi» è 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 «Riepilogo del binding di proprietà ed eventi»?
Colleghi i dati in ingresso e gli eventi in uscita dai componenti. 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 1 di 4.
Quanto tempo richiede la lezione «Riepilogo del binding di proprietà ed eventi»?
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