Host Bindings & host Config

The host of a component is its outer element. The host config in the decorator sets classes, attributes, and listeners on that element.

4 min read Level 3/5 #angular#components#host

What you'll learn

Use host class to set static classes
Bind dynamic state with bracket syntax
Listen to events on the host element

When you write <app-card></app-card>, that app-card element is the component’s host. The host config lets you style and bind to it.

Static Classes and Attributes

import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  standalone: true,
  host: {
    class: 'card rounded',
    role: 'group',
  },
  template: `<ng-content />`,
})
export class CardComponent {}

The rendered output is <app-card class="card rounded" role="group">.

Dynamic Bindings

Wrap with brackets to bind reactively. Wrap with parens to listen.

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

@Component({
  selector: 'app-card',
  standalone: true,
  host: {
    '[class.active]': 'isActive()',
    '[attr.aria-pressed]': 'isActive()',
    '(click)': 'onClick()',
    '(mouseenter)': 'hover.set(true)',
    '(mouseleave)': 'hover.set(false)',
  },
  template: `<ng-content />`,
})
export class CardComponent {
  isActive = signal(false);
  hover = signal(false);

  onClick() {
    this.isActive.update(v => !v);
  }
}

Why Not @HostBinding?

The older API used @HostBinding('class.active') and @HostListener('click') decorators on class members. They still work but require more boilerplate. The host config is more concise and keeps host configuration in one place near the selector.

Lifecycle Hooks →