Property Binding

Mengenal property binding

Property Binding adalah cara bagi Angular untuk mengontrol / mengubah value dari suatu element’s properties.

Contoh element’s property: Button’s disabled, Paragraph’s inner text, dsb.

Persiapan

Buatlah 2 components: Products (plural) dan Product (singular). Anda boleh gunakan cara pembuatan component secara manual atau menggunakan Angular CLI.

Component: Product

Buka file product.component.html, lalu isi dengan:

Template (konten) untuk component Product

Buka file product.component.css, lalu isi dengan:

Styling untuk component Product

Component: Products

Buka file products.component.css, lalu isi dengan:

Styling untuk component Products

Buka file products.component.html, lalu isi dengan:

Template (konten) untuk component Products

Component: App (utama)

Buka file app.component.css, lalu isi dengan:

Styling untuk component App

Buka file app.component.html, lalu ganti isinya dengan:

Template (konten) untuk component App

Terakhir untuk persiapan ini: Jalankan “ng server”, lalu buka browser. Seharusnya tampilan seperti ini yang Anda dapati:

Hasil pengisian template (konten) dan styling

Pembuatan Property Binding

Pembuatan Logic

Edit file products.component.ts hingga menjadi seperti ini:

Pembuatan variable dan logic

Pada line 9 kita buat variable, katakanlah untuk menyimpan permission ala-ala apakah seorang user diijinkan untuk meng-create produk baru.

Pada line 11–15, kita buat timer yang setelah 2 detik berjalan maka isi dari variable canCreateNewProduct ini berubah dari false menjadi true.

Pembuatan property binding pada template

Edit file products.component.html hingga menjadi seperti ini:

Mem-binding property ‘disabled’-nya button

Fokus dan penjelasan kode line 7–9:

1. Kita buat primary button standar Bootstrap
2. Line 8: Sematkan property: disabled
3. Line 8: Bungkus (wrap) properti disabled ini dalam tanda kurung siku “[]”, sebagai tanda bahwa properti (disabled) ini telah di-binding oleh Angular
4. Line 8: Binding dilakukan pada variable yang sudah kita deklarasikan sebelumnya di atas

Hasil Akhir

Jika dilakukan dengan benar, property binding ini akan membuat button menjadi disabled selama 2 detik, lalu setelah itu kembali enable:

Button menjadi disabled diawal

Button kembali enable setelah 2 detik

Contoh Lain Property Binding

Buka file products.component.html, tambahkan isinya menjadi:

Tambahan kode pada template component

Penambahan kode ada pada line 11–14: kita buat satu paragraf, yang didalamnya terdapat elemen <span>. Kita binding properti innerText-nya dengan variable dari component.

Hasilnya akan seperti ini:

Tampilan sebelum 2 detik berlalu

Tampilan setelah 2 detik berlalu

Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya 