Data binding menghubungkan kelas komponen dengan template-nya. Angular memiliki empat bentuk, dibedakan oleh arah aliran data dan sintaksis khasnya.
1. Interpolasi — kelas → tampilan (teks)
html
{{ title }}
{{ price * quantity }}
Data binding menghubungkan kelas komponen dengan template-nya. Angular memiliki empat bentuk, dibedakan oleh arah aliran data dan sintaksis khasnya.
{{ 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 -->
Kurung siku [ ] mengikat properti ke ekspresi (satu arah, data mengalir ke bawah ke tampilan).
<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 -->
Kurung ( ) mendengarkan acara (satu arah, data mengalir ke atas dari tampilan ke kelas).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaks [(...)] ("banana in a box") menggabungkan pengikat properti + pengikat acara untuk sinkronisasi dua arah — paling umum dengan ngModel pada input formulir.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Pengikat dua arah [()] hanyalah pengikat properti [] ditambah pengikat acara () digabungkan — kurung menunjukkan arahnya.
Data binding adalah cara Angular menjaga kelas dan template tetap tersinkronisasi — ini adalah mekanisme di balik setiap UI yang dinamis.
Mengetahui empat jenis dan sintaksinya ({{}}, [], (), [()]) serta arah mana yang mengalir setiap arah sangat penting untuk membaca dan menulis template Angular apa pun; hampir setiap baris template Angular menggunakan salah satu dari mereka.