Angular 2
Директивы атрибутов влияют на значение свойств узла узла с помощью декоратора @HostBinding.

@HostBinding

Декодер @HostBinding позволяет нам программно установить значение свойства в элементе хоста директивы. Он работает аналогично привязке свойств, определенной в шаблоне, за исключением того, что он специально нацелен на элемент хоста. Связывание проверяется на каждый цикл обнаружения изменений, поэтому при желании он может динамически меняться. Например, предположим, что мы хотим создать директиву для кнопок, которые динамически добавляют класс, когда мы нажимаем на него. Это может выглядеть примерно так:

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appButtonPress]'
})
export class ButtonPressDirective {
  @HostBinding('attr.role') role = 'button';
  @HostBinding('class.pressed') isPressed: boolean;

  @HostListener('mousedown') hasPressed() {
    this.isPressed = true;
  }
  @HostListener('mouseup') hasReleased() {
    this.isPressed = false;
  }
}

Обратите внимание, что для обоих случаев использования @HostBinding мы передаем строковое значение, для которого мы хотим повлиять. Если мы не предоставим строку декоратору, вместо этого будет использоваться имя члена класса. В первом @HostBinding мы статически устанавливаем атрибут роли на кнопку. Во втором примере нажатый класс будет применен, когда isPressed is true