Data Binding

Data-binding adalah mekanisme pada Angular untuk mengatur apa yang dapat dilihat oleh pengguna, terutama terkait dengan data pada aplikasi. Data-binding dapat mengambil dan menaruh nilai pada elemen HTML. Data-binding pada Angular juga memudahkan mengelola data.

Data Binding

Data-binding pada Angular dibedakan berdasarkan arah aliran data:
  1. Dari source ke view
  2. Dari view ke source
  3. Two-way sequence: view-to-source-to-view

Data Binding

Contoh sintax data binding:
  1. Dari komponen ke DOM
    • Menggunakan interpolation: {{ nilai }}Data Binding
    • Menggunakan property HTML: [property]=“nilai”Data Binding
  2. Dari DOM ke komponen, digunakan untuk memanggil method atau fungsi pada komponen.
    • Binding pada event: (event)=“fungsi”Data Binding
    • Two-way Binding, memungkinkan aliran data dua arah.Data Binding
    • Seperti pada contoh di atas, user.email digunakan sebagai value pada elemen input, tetapi jika user mengubah nilai, property komponen juga melakukan pembaharuan secara otomatis sesuai nilai yang baru.

Contoh Aplikasi Data Binding

Untuk melihat implementasi Angular Data Binding, buka file product-listcomponent.html pada folder src/app/product-list pada proyek-pertama.
  • Sintaks menunjukkan implementasi interpolation dan event binding.Data Binding
  • Untuk menambahkan two-way binding, modifikasi file product-list.components.ts dengan menambahkan baris berikut:Data Binding
  • Lalu modifikasi file app.module.ts pada folder src/app/ dan tambahkan sintaks berikut:Data BindingData Binding
  • Pada file product-list.component.html, tambahkan sintaks berikut:Data Binding
  • Setelah itu, jalankan ng serve dan buka uri http://localhost:4200 pada browser.
  • Tampilan akhir proyek-pertama akan seperti pada gambar berikut. Penerapan Two-way Binding terlihat pada bagian bawah berupa field input teks yang akan mengubah label di samping label Welcome.