0Pricing
Angular Academy · Lesson

Host and Host-Context Styling

Style the component host element.

Host and Host-Context Styling is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Styling the Host Element

A component is rendered inside its own host element (its selector tag). The special :host pseudo-class lets you style that element from the component CSS.

The :host Selector

Use :host to target the component own element, for example to give it display and spacing.

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

Why :host Is Needed

Without :host, you cannot style the host element from inside the component, because scoped selectors only match elements inside the template.

:host with a Condition

You can pass a selector to :host() to style the host only when it matches, such as having a class.

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

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

Binding a Host Class

Combine :host() with a host class binding to style the component based on its own state.

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

The :host-context Selector

:host-context() styles the component based on a condition on any ancestor, not the host itself. It is ideal for theming.

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

Theming Example

If a parent up the tree has the class dark-theme, the rule applies, letting one ancestor switch the look of nested components.

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

:host vs :host-context

:host checks the component own element; :host-context checks ancestors. Use host for self-state, host-context for inherited context like themes.

Combining with Descendants

You can chain :host-context with descendant selectors to style inner elements based on ancestor context.

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

Host display Defaults

Custom element hosts are inline by default. Setting display: block on :host is a common first rule so layout behaves predictably.

:host {
  display: block;
}

Practical Uses

Use host styling to control a component outer box, react to its own state, and adapt to surrounding theme classes, keeping styles encapsulated yet flexible.

Quick Check

Test your understanding of host styling.

Recap

Use :host to style the component own element and its state, and :host-context() to react to ancestor classes for theming. Setting display: block on the host is a useful default.

Frequently asked questions

Is the “Host and Host-Context Styling” lesson free?

Yes — the full text of “Host and Host-Context Styling” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Host and Host-Context Styling”?

Style the component host element. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Host and Host-Context Styling” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Component-Scoped Styles
  2. View Encapsulation Modes
  3. Host and Host-Context Styling
  4. Dynamic Classes and Styles
← Back to Angular Academy