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では、role属性をbuttonに静的に設定しています。 2番目の例では、isPressedがtrueのときに押されたクラスが適用されます