Veri bağlama, bir bileşenin sınıfını şablonuyla bağlar. Angular dört forma sahiptir ve bunlar veri akışının yönü ve ayırt edici söz dizimleri tarafından ayırt edilir.
{{ 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 -->
Köşeli parantezler [ ] bir özelliği bir ifadeye bağlar (tek yön, veriler görünüme aşağı doğru akar).
<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 -->
Parantezler ( ) olayları dinler (tek yön, veriler görünümden sınıfa yukarı doğru akar).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] söz dizimi ("kutuda muz") iki yönlü senkronizasyon için property bağlama + event bağlamasını birleştirir — çoğunlukla form girişlerinde ngModel ile.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
İki yönlü [()] sadece property bağlama [] artı event bağlama () birleşimidir — parantezler yönleri gösterir.
Veri bağlama, Angular'ın sınıfı ve şablonu senkronize tutmasının yoludur — bu her dinamik kullanıcı arayüzünün arkasındaki mekanizmadır.
Dört tür ve bunların söz dizimini ({{}}, [], (), [()]) ve her birinin akan yönü bilmek, herhangi bir Angular şablonunu okumak ve yazmak için gereklidir; Angular şablonunun neredeyse her satırı bunlardan birini kullanır.