Angular Academy · Pelajaran

Gaya dengan Cakupan Komponen

Pertahankan gaya hanya pada satu komponen.

Gaya dengan Cakupan Komponen 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.

Gaya Menjadi Bagian dari Komponen

Angular memungkinkan setiap komponen memiliki CSS-nya sendiri. Secara bawaan, gaya ini memiliki cakupan terbatas, artinya hanya memengaruhi templat komponen tersebut, bukan bagian lain halaman.

Array Gaya Sebaris

Anda dapat mendefinisikan gaya secara sebaris di dekorator @Component menggunakan array styles.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

styleUrls Eksternal

Lebih umum, arahkan ke satu atau beberapa lembar gaya eksternal dengan styleUrls.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

Singkatan styleUrl

Untuk satu lembar gaya, Angular modern mendukung properti tunggal styleUrl.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Penerapan Cakupan Terbatas

Aturan .card di satu komponen tidak akan merembes ke komponen lain yang juga menggunakan kelas card. Masing-masing terisolasi.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Cara Kerja Cakupan Terbatas

Angular menambahkan atribut unik ke elemen komponen dan menulis ulang pemilih CSS-nya agar cocok, sehingga gaya hanya diterapkan di dalam komponen tersebut.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Gaya Tidak Merembes Masuk

Sama seperti gaya Anda tetap berada di dalam, sebagian besar gaya dari luar juga tidak menimpa aturan komponen secara tidak sengaja, sehingga komponen tetap mandiri.

Gaya Global

Untuk gaya seluruh aplikasi, gunakan styles.css global yang tercantum dalam angular.json. Gaya ini tidak memiliki cakupan terbatas.

/* src/styles.css - global */
body { font-family: system-ui; }

Beberapa Lembar Gaya

Sebuah komponen dapat memuat beberapa lembar gaya dengan mencantumkannya dalam array.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

Menggunakan Pengikatan class

Gaya dengan cakupan terbatas berpadu secara alami dengan pengikatan kelas untuk menerapkan aturan secara kondisional.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Manfaat Cakupan Terbatas

Gaya dengan cakupan terbatas mencegah benturan penamaan di seluruh aplikasi besar, memungkinkan tim bekerja secara independen, serta membuat komponen mudah dipindahkan dan dipahami.

Pemeriksaan Singkat

Uji pemahaman Anda tentang gaya yang dicakup dalam komponen.

Rangkuman

Komponen membawa CSS melalui styles, styleUrls, atau styleUrl. Secara default, aturan ini dibatasi pada komponen sehingga mencegah benturan. Gunakan lembar gaya global untuk aturan yang berlaku di seluruh aplikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Gaya dengan Cakupan Komponen” gratis?

Ya — teks lengkap “Gaya dengan Cakupan Komponen” 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 “Gaya dengan Cakupan Komponen”?

Pertahankan gaya hanya pada satu 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 “Gaya dengan Cakupan Komponen” 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

← Kembali ke Angular Academy