Every Angular component has an outer wrapper element — the <app-card> that the parent's template uses to reference the component. That wrapping element is the host element, and it sits OUTSIDE the component's template. You cannot style or bind to it with normal template syntax. The host: metadata block (and the legacy @HostBinding/@HostListener decorators) is how you reach it.

This is lesson 2.12 of the Angular Tutorial, part of Module 2. By the end you will know how to add classes, attributes, styles, and event listeners to the host element from inside the component class — and when each pattern is the right choice.

The host element: a refresher #

When you use a component:

<app-card>...</app-card>

The <app-card> element IS the host. The component's template renders inside it. Inside the component you can style its template freely, but the wrapping <app-card> itself is in the PARENT's scope — so the parent's CSS would apply, and the parent's bindings would set its attributes.

That split is awkward when the component itself wants to do things like "set my own display style to block," "apply a class when active," or "listen for clicks on my whole element." The host metadata fixes that.

The modern host: syntax #

The host property in @Component accepts an object that maps to:

• [prop] — property bindings on the host element
• [attr.X] — attribute bindings on the host element
• [class.X] — toggle a class on the host
• [style.X] — toggle a style on the host
• (event) — event listeners on the host

A realistic example:

@Component({
  selector: 'app-card',
  template: `<ng-content />`,
  host: {
    'role': 'article',
    '[class.featured]': 'isFeatured()',
    '[class.disabled]': '!enabled()',
    '[attr.aria-busy]': 'isLoading() ? "true" : null',
    '[style.opacity]': 'opacity()',
    '(click)': 'onClick($event)',
    '(keydown.enter)': 'onClick($event)',
  },
})
export class CardComponent {
  isFeatured = input(false);
  enabled = input(true);
  isLoading = input(false);
  opacity = computed(() => this.enabled() ? 1 : 0.4);
  clicked = output<MouseEvent | KeyboardEvent>();

  onClick(e: MouseEvent | KeyboardEvent) { this.clicked.emit(e); }
}

Three categories of binding are shown:

1. Static attribute: 'role': 'article' — applied once, never changes
2. Dynamic bindings: '[class.featured]': 'isFeatured()' — the expression on the right is evaluated reactively, like any template binding
3. Event listeners: '(click)': 'onClick($event)' — fires on the host element

The rendered DOM for <app-card isFeatured>...</app-card> (when active) would be:

<app-card role="article" class="featured" style="opacity: 1;">
  ...content...
</app-card>

The component owns its own outer shell.

Static vs dynamic — the brackets matter #

The difference between bracketed and unbracketed keys is the same as in templates:

host: {
  // Static — sets once, never changes
  'role': 'article',
  'data-component': 'card',

  // Dynamic — reactive, re-evaluates when signals change
  '[class.active]': 'isActive()',
  '[attr.aria-pressed]': 'pressed()',
  '[style.--accent]': 'accent()',
}

Use static for values that never change (the role, a data attribute). Use bracketed for anything that depends on signals or props.

Legacy: @HostBinding and @HostListener #

The pre-v16 syntax did the same thing via decorators on properties and methods:

export class CardComponent {
  @HostBinding('class.featured') isFeatured = false;
  @HostBinding('attr.role') role = 'article';

  @HostListener('click', ['$event'])
  onClick(e: MouseEvent) { /* ... */ }

  @HostListener('window:resize')
  onResize() { /* ... */ }
}

Both styles still work in v22. The host: block is preferred for new code because:

1. All bindings live in one place — easier to see what the host element does
2. No decorator overhead — pure metadata
3. Easier to compose with hostDirectives (next section)

Migration is mechanical. The Angular CLI ships a schematic; for hand migration, walk each decorator and move it into the host object.

Listening on window and document #

The host syntax supports namespaced events for window and document:

host: {
  '(window:resize)': 'onResize()',
  '(document:keydown.escape)': 'onEscape()',
  '(window:scroll)': 'onScroll($event)',
}

This is the cleanest way to attach global listeners that auto-cleanup when the component dies. Use cases:

• Modal/dropdown dismissal on Escape
• Window resize for responsive measurements
• Scroll-driven UI (sticky headers, scroll progress)

No manual addEventListener + removeEventListener in ngOnDestroy. The host metadata handles cleanup automatically.

Composing behaviors with hostDirectives #

A component can apply directives to its own host element via hostDirectives (introduced in v15):

@Directive({
  selector: '[appHoverGlow]',
  host: { '[style.box-shadow]': 'hovered() ? "0 0 8px gold" : ""' },
})
export class HoverGlowDirective {
  private el = inject(ElementRef);
  hovered = signal(false);
  // ... attach mouseenter/mouseleave to host
}

@Directive({
  selector: '[appPressEffect]',
  host: { '[class.pressed]': 'pressed()' },
})
export class PressEffectDirective { /* ... */ }

@Component({
  selector: 'app-button',
  hostDirectives: [HoverGlowDirective, PressEffectDirective],
  template: `<ng-content />`,
})
export class ButtonComponent {}

Now every <app-button> has hover-glow AND press-effect behavior, even though the directives are defined separately. This is the cleanest composition pattern Angular has — better than the inheritance gymnastics of older versions.

You can also expose the directive's inputs and outputs through the host:

hostDirectives: [
  {
    directive: HoverGlowDirective,
    inputs: ['intensity'],          // expose the directive's `intensity` input
    outputs: ['glowing'],            // expose its `glowing` output
  },
]

Now consumers of <app-button> can write <app-button intensity="strong" (glowing)="onGlow()"> and bind directly to the directive's API.

The escape hatch: ElementRef + Renderer2 #

For cases where the host syntax doesn't cover what you need (rare):

import { ElementRef, Renderer2, inject, afterNextRender } from '@angular/core';

export class CardComponent {
  private el = inject(ElementRef<HTMLElement>);
  private renderer = inject(Renderer2);

  constructor() {
    afterNextRender(() => {
      // Manually manipulate the host element
      this.renderer.setAttribute(this.el.nativeElement, 'data-mounted', '1');
      this.renderer.addClass(this.el.nativeElement, 'ready');
    });
  }
}

The Renderer2 API is the proper way to manipulate the DOM in code — it works in SSR (where document may not exist) and across platforms (web workers, NativeScript). Direct element.classList.add(...) works in the browser but breaks in non-browser environments.

Reach for this only when host: doesn't fit — DOM measurements after layout, third-party library integration that needs raw DOM, etc.

A real-world button using host: #

import { Component, input, output, computed } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<ng-content />`,
  host: {
    'role': 'button',
    'tabindex': '0',
    '[class.primary]': 'variant() === "primary"',
    '[class.danger]': 'variant() === "danger"',
    '[class.disabled]': 'disabled()',
    '[attr.aria-disabled]': 'disabled() ? "true" : null',
    '[attr.aria-busy]': 'busy() ? "true" : null',
    '(click)': 'handleClick($event)',
    '(keydown.enter)': 'handleClick($event)',
    '(keydown.space)': 'handleClick($event); $event.preventDefault()',
  },
  styles: `
    :host {
      display: inline-block; padding: 8px 14px; border-radius: 6px;
      background: #eee; cursor: pointer; user-select: none;
      transition: background 200ms;
    }
    :host(.primary)  { background: #3b82f6; color: white; }
    :host(.danger)   { background: #ef4444; color: white; }
    :host(.disabled) { opacity: 0.5; pointer-events: none; }
  `,
})
export class ButtonComponent {
  variant = input<'default' | 'primary' | 'danger'>('default');
  disabled = input(false);
  busy = input(false);
  clicked = output<MouseEvent | KeyboardEvent>();

  handleClick(e: MouseEvent | KeyboardEvent) {
    if (this.disabled() || this.busy()) return;
    this.clicked.emit(e);
  }
}

No template wrapper element — <app-button> IS the button. The host handles role, tabindex, ARIA, all three event types (click, Enter, Space), and class-based styling variations.

Common gotchas #

What's next #

Lesson 2.13 covers signal queries (viewChild, viewChildren, contentChild, contentChildren) — the modern way to reference child elements and projected components. Lesson 2.14 closes Module 2 with programmatic component creation.

Module 3 then dives into the signal system in depth — producer/consumer graph, effect vs computed, linkedSignal, zoneless internals.

Try it yourself #

A chip component using only host: for everything visual:

import { Component, input, output } from '@angular/core';

@Component({
  selector: 'app-chip',
  template: `<ng-content />`,
  host: {
    'role': 'button',
    'tabindex': '0',
    '[class.removable]': 'removable()',
    '[class.selected]': 'selected()',
    '(click)': 'toggle()',
    '(keydown.delete)': 'remove()',
    '(keydown.enter)': 'toggle()',
  },
  styles: `
    :host { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: #eee; cursor: pointer; user-select: none; }
    :host(.selected) { background: #3b82f6; color: white; }
    :host(.removable)::after { content: ' ×'; opacity: 0.6; }
  `,
})
export class ChipComponent {
  selected = input(false);
  removable = input(false);
  toggled = output<boolean>();
  removed = output<void>();

  toggle() { this.toggled.emit(!this.selected()); }
  remove() { if (this.removable()) this.removed.emit(); }
}

<app-chip selected removable (toggled)="..." (removed)="...">Tag</app-chip> — three input signals, two outputs, three event listeners, two class toggles, all in one host block.

Lesson 2.13 picks up signal queries.