Vinculação de dados conecta a classe de um componente com seu template. Angular tem quatro formas, distinguidas pela direção do fluxo de dados e sua sintaxe 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 -->
Colchetes [ ] vinculam uma propriedade a uma expressão (de uma maneira, dados fluem para baixo na visão).
<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 -->
Parênteses ( ) escutam eventos (de uma maneira, dados fluem para cima da visão para a classe).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
A sintaxe [(...)] ("banana em uma caixa") combina vinculação de propriedade + vinculação de evento para sincronização bidirecional — mais comumente com ngModel em entradas de formulário.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
O bidirecional [()] é apenas vinculação de propriedade [] mais vinculação de evento () combinadas — os colchetes mostram as direções.
Vinculação de dados é como Angular mantém a classe e o template sincronizados — é o mecanismo por trás de cada UI dinâmica.
Conhecer os quatro tipos e sua sintaxe ({{}}, [], (), [()]) e a direção em que cada um flui é essencial para ler e escrever qualquer template Angular; quase toda linha de um template Angular usa um deles.