0Pricing
Angular Academy · Lesson

Host and Host-Context Styling

Style the component host element.

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;
}

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