Two-Way Databinding
Pada 2 tutorial sebelumnya kita telah belajar tentang Property Binding dan Event Binding (termasuk cara passing data-nya).
Namun Angular juga dapat melakukan keduanya langsung sekaligus, dan itulah yang disebut Two-Way Databinding.
Persiapan
Buatlah 1 component baru: User, boleh dengan cara manual ataupun menggunakan Angular CLI.
Register component baru dan FormsModule
Jika Anda memilih untuk membuat component baru secara manual, maka Anda harus me-register component baru tersebut:
Fokus line 12 dimana kita me-register component User ini. Pastikan juga sudah ada/melakukan import FormsModule (line 3 dan 16).
Mengisi template component
Buka file user.component.html, isi dengan konten seperti ini:
Deklarasi variable dan function yang dibutuhkan
Buka file user.component.ts, jadikan isinya menjadi seperti ini:
Variable yang kita butuhkan ada di-line 9, sedangkan function yang akan kita panggil nanti ada di-line 16–18.
Memanggil component: User di module utama
Buka file app.component.html, lalu isi dengan:
Fokus kode di atas adalah line 6, sisanya hanyalah layouting dari Bootstrap 4.
Percobaan #1
Jalankan “ng serve”, buka Chrome browser dan DevTool, maka Anda akan dapati hasil seperti ini:
Ops! Ada pesan error.
Jangan khawatir. Pesan error itu memberi tahu bahwa kita seharusnya menyematkan atribut “name” pada input text.
Percobaan #2 (Fixing Percobaan #1)
Buka file user.component.html, lalu ubah isinya menjadi:
Fokus pada line 5 dan 11 dimana kita menambahkan atribut “name” pada kedua input text.
Simpan perubahan, lalu kembali buka Chrome browser dan DevTool:
Hasil Akhir
Cobalah untuk mengisi / mengubah isian pada Name #1 dan Name #2 secara bergantian. Anda akan tahu apa dan bagaimana two-way databinding bekerja (pada Name #2):
Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya
