HostBinding — Angular

Декоратор, который помечает свойство DOM или класс, стиль либо атрибут элемента как свойство привязки к host и задаёт метаданные конфигурации. Angular автоматически проверяет привязки к host во время обнаружения изменений и обновляет host-элемент директивы, если привязка изменяется.

API

@ HostBinding {}

Примечания по использованию

ПРИМЕЧАНИЕ: Всегда предпочитайте использовать свойство host вместо @HostBinding. Этот декоратор существует исключительно для обратной совместимости.

В следующем примере создаётся директива, которая задаёт классы valid и invalid, цвет стиля и идентификатор DOM-элемента, на котором установлена директива ngModel.

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control: NgModel) {}
  // class bindings
  @HostBinding('class.valid') get valid() { return this.control.valid; }
  @HostBinding('class.invalid') get invalid() { return this.control.invalid; }

  // style binding
  @HostBinding('style.color') get color() { return this.control.valid ? 'green': 'red'; }

  // style binding also supports a style unit extension
  @HostBinding('style.width.px') @Input() width: number = 500;

  // attribute binding
  @HostBinding('attr.aria-required')
  @Input() required: boolean = false;

  // property binding
  @HostBinding('id') get id() { return this.control.value?.length ? 'odd':  'even'; }

@Component({
  selector: 'app',
  template: `<input [(ngModel)]="prop">`,
})
class App {
  prop;
}