Pendahuluan


Dalam membangun antarmuka pengguna aplikasi web yang dinamis, Angular menawarkan mekanisme untuk memperbarui elemen secara otomatis.

Pebaruan ini berdasarkan data dan status aplikasi Anda.

Salah satu teknik dasar yang digunakan adalah teknik property binding.


Apa itu Property Binding?


Property binding adalah cara menghubungkan komponen Angular dan data dengan elemen HTML di template.

Melalui sintaks sederhana, kita dapat “binding” nilai properti suatu komponen ke properti elemen HTML, sehingga perubahan pada data komponen secara otomatis tercermin pada tampilan elemen di browser.

Jadi property komponen Angular di petakan ke property komponen HTML.


Syntax Property Binding


Untuk melakukan binding properti, kita menggunakan sintaks sederhana dalam template HTML:


<element [property]="expression">...</element>

Penjelasannya :


element: Elemen HTML yang ingin kita manipulasi.
property: Properti elemen yang ingin kita binding.
expression: Ekspresi yang berisi nilai untuk dibindig ke properti. Ekspresi bisa berupa literal, nama variabel, fungsi, atau operasi kompleks.

Contoh :

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  template: `
    <div [contentEditable]="isEditable"></div>
  `,
  standalone: true,
})
export class AppComponent {
  isEditable = true;  
}

Disini kita melakukan binding property contentEditable nya HTML ke attribute property komponent Angular bernama isEditable.


Contoh lain Property Binding?


1. Menampilkan data komponen

<p>Selamat datang, {{ user.name }}!</p>

Di sini, properti innerHTML elemen

diikat ke ekspresi user.name, yang diambil dari komponen.

Jadi, nama pengguna dinamis ditampilkan berdasarkan data komponen.


2. Mengontrol atribut berdasarkan kondisi

<button [disabled]="isLoading">Klik Saya</button>

Di sini, Properti “disabled” dari sebuah button dibind ke variabel isLoading.

Jika isLoading bernilai true, maka tombol dinonaktifkan.



3. Penerapan dalam directive

<p appHighlight [color]="accentColor">Pilih warna teks ini!</p>

Di sini, direktif kustom “appHighlight” digunakan untuk mewarnai teks.

Properti “color” dari direktif diatas dibind ke properti “accentColor” yang dipunyai oleh komponen untuk menyesuaikan warna secara dinamis.


Tips dan Trik Property Binding


  • Gunakan ngFor dan ngIf atau @If dan @for untuk binding data ke iterasi atau kondisi.
  • Manfaatkan pipe untuk memformat data sebelum ditampilkan.
  • Perhatikan keamanan saat menggunakan ekspresi kompleks.
  • Gunakan konsep banana in a box syntax [(property)] untuk two-way binding (binding dua arah).

Mengapa Menggunakan Property Binding?


Menggunakan property binding membawa banyak keuntungan bagi aplikasi :

  • Dinamisme: Tampilan elemen disesuaikan secara real-time berdasarkan data aplikasi.
  • Keringkasan kode: Anda tidak perlu memanipulasi DOM secara manual untuk memperbarui tampilan elemen.
  • Pemeliharaan mudah: Kode lebih bersih dan terstruktur, memudahkan pengembangan dan perbaikan di masa depan.
  • Komponenisasi: Property binding memperkuat konsep komponen Angular dengan memisahkan logika dan tampilan aplikasi.