Angular Academy · Pelajaran

Gaya Host dan Host-Context

Atur gaya elemen host komponen.

Gaya Host dan Host-Context adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Memberi Gaya pada Elemen Host

Komponen dirender di dalam elemen host-nya sendiri (tag pemilihnya). Pseudo-kelas khusus :host memungkinkan Anda memberi gaya pada elemen tersebut dari CSS komponen.

Pemilih :host

Gunakan :host untuk menargetkan elemen milik komponen itu sendiri, misalnya untuk mengatur tampilan dan jaraknya.

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

Mengapa :host Diperlukan

Tanpa :host, Anda tidak dapat memberi gaya pada elemen host dari dalam komponen, karena pemilih yang dibatasi hanya cocok dengan elemen di dalam templat.

:host dengan Kondisi

Anda dapat meneruskan pemilih ke :host() untuk memberi gaya pada host hanya ketika host tersebut cocok, misalnya saat memiliki suatu kelas.

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

Mengikat Kelas Host

Gabungkan :host() dengan pengikatan kelas host untuk memberi gaya pada komponen berdasarkan statusnya sendiri.

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

Pemilih :host-context

:host-context() memberi gaya pada komponen berdasarkan kondisi pada leluhur mana pun, bukan pada host itu sendiri. Ini ideal untuk penerapan tema.

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

Contoh Penerapan Tema

Jika induk di atasnya dalam hierarki memiliki kelas dark-theme, aturan tersebut berlaku, sehingga satu leluhur dapat mengubah tampilan komponen-komponen bersarang.

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host vs :host-context

:host memeriksa elemen milik komponen itu sendiri; :host-context memeriksa leluhur. Gunakan host untuk statusnya sendiri dan host-context untuk konteks yang diwariskan, seperti tema.

Menggabungkan dengan Keturunan

Anda dapat merangkai :host-context dengan pemilih keturunan untuk memberi gaya pada elemen dalam berdasarkan konteks leluhur.

:host-context(.compact) .title {
  font-size: 12px;
}

Default Tampilan Host

Host elemen khusus secara default ditampilkan sebaris. Menetapkan display: block pada :host adalah aturan awal yang umum agar tata letak berperilaku secara konsisten.

:host {
  display: block;
}

Penggunaan Praktis

Gunakan gaya host untuk mengatur kotak luar komponen, merespons statusnya sendiri, dan menyesuaikan diri dengan kelas tema di sekitarnya, sehingga gaya tetap terenkapsulasi namun fleksibel.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemberian gaya pada host.

Rangkuman

Gunakan :host untuk memberi gaya pada elemen dan status komponen itu sendiri, serta :host-context() untuk merespons kelas leluhur dalam penerapan tema. Menetapkan display: block pada host merupakan default yang berguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Gaya Host dan Host-Context” gratis?

Ya — teks lengkap “Gaya Host dan Host-Context” 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 Host dan Host-Context”?

Atur gaya elemen host 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 3 dari 4.

Berapa lama pelajaran “Gaya Host dan Host-Context” 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