Angular Academy · Lesson

Host and Host-Context Styling

Style the component host element.

Lesson 3 of 413 steps

Host and Host-Context Styling is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Angular Academy learning path, including “Host and Host-Context Styling”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

← Back to Angular Academy