All Form Binding
Dalam tutorial ini kita akan melatih kembali 2 macam binding yang sudah kita dapatkan dari tutorial sebelumnya.
Persiapan
Membuat component baru
Buatlah proyek Angular baru dan satu komponen baru bernama Server didalamnya.
NOTE: Anda bisa membuat component baru secara manual, tapi jangan lupa untuk me-register-nya di app.module.ts seperti ini:
Fokus pada line 7 dan 12 dimana kita me-register component baru ini.
Mengisi template (konten) component: server
Isi file server.component.html hingga menjadi seperti ini:
Kode diatas adalah untuk membuat satu form berisi label, input text, dan submit button.
Pada line 4–6 kita membuat input text dan melakukan property binding pada properti readonly-nya. Value dari input text ini adalah variable yang sudah kita buat di atas.
Pada line 8–12 kita membuat submit button dan melakukan property binding pada properti disabled-nya. Masih dengan button yang sama, kita juga melakukan event binding pada event onClick()-nya (menjadi click saja).
Deklarasi variables dan function yang dibutuhkan
Buka file server.component.ts, lalu edit isinya hingga menjadi seperti ini:
Ada 3 variables yang kita deklarasikan disini, yaitu: allowCreateInstance (line 9), instanceName (line 10), dan instanceCreationMessage (line 11).
Lalu ada 1 function yang kita buat: onCreateInstance() (line 22–25).
Terakhir, didalam constructor() (line 13–17) kita buat suatu fungsi yang berhubungan dengan timer.
Mengisi template (konten) component utama
Isi file app.component.html hingga seperti ini:
Fokus pada line 7 dimana kita menyematkan tag dari component server kita. Sisanya hanyalah layouting dari Bootstrap 4.
Hasil Akhir
Jalankan “ng serve”, buka browser, dan Anda akan dapati tampilan yang kurang-lebih seperti ini:
Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya
