Pendahuluan


Dalam pengembangan web, data dan tampilan adalah dua sisi dari mata uang.

Data adalah apa yang kita kerjakan, dan tampilan adalah cara kita menampilkannya kepada pengguna.

Binding data adalah cara menghubungkan data dengan tampilan, sehingga perubahan data akan tercermin di tampilan secara otomatis.


Binding data dua arah (two way binding) adalah jenis binding data yang memungkinkan data dan tampilan saling memperbarui satu sama lain.

Ini seperti orang yang berdansa, di mana setiap gerakan satu orang memicu gerakan orang lain.


Istilah “Banana in a Box” ?


Istilah banana in a box adalah cara yang mudah untuk mengingat konsep binding data dua arah.


Box –> kotak

Banana –> pisang

Dalam analogi ini, kotak mewakili data, dan pisang mewakili tampilan.

  • Kotak: Kotak adalah wadah yang menyimpan data. Data dapat berupa variabel, properti, atau layanan.

  • Pisang: Pisang adalah elemen UI yang menampilkan data. Pisang dapat berupa input, label, atau komponen.


Contoh Binding Data Dua Arah ?


Contohnya sederhana.

Jadi daripada menulis seperti ini :

<my-input [text]="val" (textChange)="val=$event"></my-input>

Kita dapat menulis sbb :

<my-input [(text)]="val"></my-input>

Biasanya binding data dua arah menggunakan direktif [(ngModel)] .

Karena [ngModel] sendiri melakukan binding satu arah.

Sementara [(ngModel)] melakukan binding dua arah.

Direktif ini menghubungkan data dan tampilan melalui binding.

Misalnya, kita memiliki komponen dengan input yang disebut nama.

Kita ingin data yang dimasukkan ke dalam input ini disimpan dalam variabel nama.

<input [(ngModel)]="nama">

Dalam kode ini, nama adalah variabel yang akan menyimpan data dari input.

Saat pengguna mengetik teks ke dalam input, nilai teks akan disimpan dalam variabel nama.

Perubahan nilai nama akan tercermin secara otomatis di input.


Manfaat Binding Data Dua Arah


Binding data dua arah memiliki beberapa manfaat, antara lain:

  • Kode yang lebih ringkas: Binding data dua arah menghilangkan kebutuhan untuk menulis kode manual untuk memperbarui tampilan.
  • Pengalaman pengguna yang lebih baik: Binding data dua arah memastikan bahwa tampilan selalu mencerminkan data terkini.
  • Kode yang lebih mudah dipahami: Binding data dua arah membuat kode lebih mudah dipahami karena logika pemrograman disederhanakan.

Contoh Penggunaan Binding Data Dua Arah


Binding data dua arah dapat digunakan dalam berbagai kasus, antara lain:

  • Form: Binding data dua arah dapat digunakan untuk membuat form yang lebih interaktif.
  • Tabel: Binding data dua arah dapat digunakan untuk membuat tabel yang dapat diubah secara dinamis.
  • Diagram: Binding data dua arah dapat digunakan untuk membuat diagram yang dapat diperbarui secara otomatis.

Banana dan Box ?


Box :
  • Dapat berupa variabel, properti, atau layanan.
  • Dapat berupa data sederhana, seperti teks atau angka, atau data kompleks, seperti objek atau array.
Banana :
  • Dapat berupa input, label, atau komponen.
  • Dapat digunakan untuk menampilkan data dalam berbagai cara, seperti teks, gambar, atau grafik.

Tips untuk Menggunakan Binding Data Dua Arah


  • Mulailah dengan binding data satu arah. Setelah memahami cara kerja binding data satu arah, kita dapat beralih ke binding data dua arah.
  • Gunakan binding data dua arah hanya saat diperlukan. Binding data dua arah dapat mempersulit kode, jadi gunakan hanya saat diperlukan.
  • Pertimbangkan bagaimana akan menggunakan data dalam tampilan. Jika kita perlu memperbarui tampilan secara dinamis, gunakan binding data dua arah.