Rangkuman Binding Properti dan Peristiwa
Ikat data ke dalam dan peristiwa ke luar komponen.
Rangkuman Binding Properti dan Peristiwa adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Dua Arah Aliran Data
Templat Angular memindahkan data dalam dua arah: pengikatan properti mendorong data ke DOM, sedangkan pengikatan peristiwa mengirimkan tindakan pengguna kembali ke komponen.
Interpolasi
Interpolasi dengan kurung kurawal ganda menampilkan nilai komponen sebagai teks. Interpolasi bersifat satu arah, dari komponen ke tampilan.
<p>{{ title }}</p>
// component
title = "Dashboard";Sintaks Pengikatan Properti
Tanda kurung siku mengikat nilai komponen ke properti elemen atau komponen. Ekspresi di sebelah kanan dievaluasi lalu ditetapkan.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Mengikat ke Input Komponen
Pengikatan properti juga memasukkan nilai ke properti @Input komponen anak.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Atribut vs Properti
Pengikatan properti menargetkan properti DOM, bukan atribut HTML. Untuk atribut murni, gunakan awalan attr..
<button [attr.aria-label]="label">Save</button>Sintaks Pengikatan Peristiwa
Tanda kurung mengikat peristiwa DOM ke metode komponen. Metode tersebut dijalankan ketika peristiwa terjadi.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }Objek $event
Variabel khusus $event membawa muatan peristiwa ke penangan Anda.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Mengikat ke Output Komponen
Pengikatan peristiwa juga mendengarkan peristiwa @Output komponen anak yang dipancarkan melalui EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Menggabungkan Kedua Pengikatan
Menggunakan pengikatan properti dan pengikatan peristiwa secara bersamaan pada properti yang sama merupakan dasar pengikatan dua arah, yang akan Anda lihat berikutnya.
<input [value]="name" (input)="name = $event.target.value">Pengikatan Kelas dan Gaya
Pengikatan properti khusus mengaktifkan atau menonaktifkan kelas dan gaya berdasarkan keadaan komponen.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Menjaga Templat Tetap Deklaratif
Pengikatan menjaga hubungan antara data dan tampilan tetap deklaratif. Angular memperbarui DOM secara otomatis ketika nilai yang terikat berubah.
Pemeriksaan Singkat
Uji pemahaman Anda tentang pengikatan properti dan peristiwa.
Ringkasan
Pengikatan properti [prop] mendorong data ke tampilan, pengikatan peristiwa (event) mengirimkan tindakan kembali, dan interpolasi menampilkan teks. Menggabungkan pengikatan properti dan peristiwa pada nilai yang sama menyiapkan pengikatan dua arah.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Rangkuman Binding Properti dan Peristiwa” gratis?
Ya — teks lengkap “Rangkuman Binding Properti dan Peristiwa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Rangkuman Binding Properti dan Peristiwa”?
Ikat data ke dalam dan peristiwa ke luar komponen. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Rangkuman Binding Properti dan Peristiwa” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Rangkuman Binding Properti dan Peristiwa
- Binding Dua Arah dengan ngModel
- Input Sinyal model()
- Properti Kustom yang Dapat Diikat Dua Arah