Kelas dan Gaya Dinamis
Ikat kelas dan gaya secara reaktif.
Kelas dan Gaya Dinamis adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Pemberian Gaya Dinamis dalam Templat
Angular memungkinkan Anda mengikat kelas dan gaya sebaris ke status komponen sehingga antarmuka diperbarui secara otomatis ketika data berubah.
Pengikatan Satu Kelas
Gunakan [class.name] untuk mengaktifkan atau menonaktifkan satu kelas CSS berdasarkan ekspresi boolean.
<div [class.active]="isActive">Item</div>
// component
isActive = true;Beberapa Kelas dengan ngClass
ngClass menerapkan beberapa kelas sekaligus menggunakan objek berisi nama kelas yang dipetakan ke nilai boolean.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass dengan Larik dan String
ngClass juga menerima string nama kelas atau sebuah larik.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Pengikatan Satu Gaya
Gunakan [style.property] untuk mengikat satu properti CSS sebaris ke suatu nilai.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Pengikatan Gaya dengan Satuan
Tambahkan akhiran satuan untuk mengikat nilai numerik dengan satuan seperti piksel atau persen.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;Beberapa Gaya dengan ngStyle
ngStyle menetapkan beberapa gaya sebaris sekaligus dari sebuah objek.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>Pengikatan Kelas Mengatasi Konflik
Ketika kelas statis dan kelas terikat saling tumpang tindih, Angular menggabungkannya; pengikatan mengatur apakah kelas dinamis ada, tanpa menghapus kelas statis.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Merespons Status
Pengikatan dievaluasi ulang selama deteksi perubahan, sehingga memperbarui properti komponen segera mengubah gaya elemen.
toggle() {
this.isActive = !this.isActive;
}Memilih Kelas atau Gaya
Utamakan pengikatan kelas dengan aturan CSS agar mudah dipelihara; gunakan pengikatan gaya langsung untuk nilai yang benar-benar dinamis, seperti lebar atau warna hasil perhitungan.
Dengan Sinyal
Pengikatan kelas dan gaya juga berfungsi dengan sinyal; cukup panggil sinyal tersebut dalam ekspresi templat.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Pemeriksaan Singkat
Uji pemahaman Anda tentang kelas dan gaya dinamis.
Rangkuman
Aktifkan atau nonaktifkan satu kelas dengan [class.name] atau banyak kelas dengan ngClass; tetapkan satu gaya dengan [style.prop] (dengan satuan opsional) atau banyak gaya dengan ngStyle. Pengikatan otomatis merespons status, termasuk sinyal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kelas dan Gaya Dinamis” gratis?
Ya — teks lengkap “Kelas dan Gaya Dinamis” 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 “Kelas dan Gaya Dinamis”?
Ikat kelas dan gaya secara reaktif. 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 4 dari 4.
Berapa lama pelajaran “Kelas dan Gaya Dinamis” 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
- Gaya dengan Cakupan Komponen
- Mode Enkapsulasi View
- Gaya Host dan Host-Context
- Kelas dan Gaya Dinamis