Что такое `HostListener` и `HostBinding`?

Question

Accepted Answer

## Ядро темы
Это API связи класса директивы/компонента с **хост-элементом** — DOM-узлом, на котором стоит селектор.

- **`HostListener` / host listeners** — реакция на события хоста.
- **`HostBinding` / host bindings** — биндинг классов, стилей, атрибутов, свойств хоста.

```ts
@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'onEnter()',
    '(mouseleave)': 'onLeave()',
    '[class.active]': 'active',
    '[attr.aria-pressed]': 'active',
  },
})
export class HighlightDirective {
  active = false;
  onEnter() { this.active = true; }
  onLeave() { this.active = false; }
}
```

Эквивалент — `@HostListener('mouseenter')` и `@HostBinding('class.active')`. Актуальные гайды чаще рекомендуют объект `host` в метаданных: поведение видно одним блоком, удобнее для tree-shaking и обзора.

## Где применяют

Tooltip, pressable/selected состояния, autofocus, клавиатурные шорткаты на хосте без лишней обёртки в шаблоне родителя.

## Практика
Для сложных жестов иногда лучше `fromEvent` + `takeUntilDestroyed`, но для простого class-toggle на хосте объект `host` читается яснее и локальнее.

## Итог

Host* = события и свойства самого элемента директивы. Базовый инструмент атрибутных директив и аккуратного a11y/UX-поведения.