Data binding conecta la clase de un componente con su plantilla. Angular tiene cuatro formas, distinguidas por la dirección del flujo de datos y su sintaxis característica.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Los corchetes [ ] vinculan una propiedad a una expresión (unidireccional, los datos fluyen hacia abajo en la vista).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Los paréntesis ( ) escuchan eventos (unidireccional, los datos fluyen hacia arriba desde la vista a la clase).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
La sintaxis [(...)] ("plátano en una caja") combina vinculación de propiedades + vinculación de eventos para sincronización bidireccional — más comúnmente con ngModel en entradas de formularios.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
La vinculación bidireccional [()] es simplemente vinculación de propiedades [] más vinculación de eventos () combinadas — los corchetes muestran las direcciones.
Data binding es cómo Angular mantiene la clase y la plantilla sincronizadas — es el mecanismo detrás de cada interfaz de usuario dinámica.
Conocer los cuatro tipos y su sintaxis ({{}}, [], (), [()]) y qué dirección fluye cada uno es esencial para leer y escribir cualquier plantilla de Angular; casi cada línea de una plantilla de Angular utiliza uno de ellos.