Angular 2
Direttive sugli attributi per influenzare il valore delle proprietà sul nodo host utilizzando il decoratore @HostBinding.

@HostBinding

Il decoratore @HostBinding ci consente di impostare in modo programmatico un valore di proprietà sull'elemento host della direttiva. Funziona in modo simile a un vincolo di proprietà definito in un modello, tranne per il target specifico dell'elemento host. La rilegatura viene controllata per ogni ciclo di rilevamento delle modifiche, quindi può essere modificata dinamicamente, se lo si desidera. Ad esempio, diciamo che vogliamo creare una direttiva per i pulsanti che aggiunge dinamicamente una classe quando la premiamo. Potrebbe sembrare qualcosa di simile:

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

Si noti che per entrambi i casi di utilizzo di @HostBinding stiamo passando un valore stringa per quale proprietà vogliamo influenzare. Se non forniamo una stringa al decoratore, verrà utilizzato il nome del membro della classe. Nel primo @HostBinding, impostiamo staticamente l'attributo role al pulsante. Per il secondo esempio, la classe premuta verrà applicata quando isPressed è true