Angular 2
Dyrektywy atrybutów wpływające na wartość właściwości w węźle hosta za pomocą dekoratora @HostBinding.

@HostBinding

Dekorator @HostBinding pozwala nam programowo ustawić wartość właściwości elementu hosta dyrektywy. Działa podobnie do wiązania właściwości zdefiniowanego w szablonie, z tym wyjątkiem, że konkretnie jest ukierunkowane na element hosta. Wiązanie jest sprawdzane dla każdego cyklu wykrywania zmian, dzięki czemu może zmieniać się dynamicznie w razie potrzeby. Załóżmy na przykład, że chcemy utworzyć dyrektywę dla przycisków, która dynamicznie dodaje klasę po naciśnięciu na nią. Może to wyglądać mniej więcej tak:

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;
  }
}

Zauważ, że dla obu przypadków użycia @HostBinding przekazujemy wartość ciągu, na którą właściwość chcemy wpływać. Jeśli nie podamy dekoratora ciągu, wówczas zostanie użyta nazwa członka klasy. W pierwszym @HostBinding statycznie przypisujemy atrybut roli do przycisku. W drugim przykładzie klasa wciśnięta zostanie zastosowana, gdy parametr isPressed ma wartość true