Angular 2
Directives d'attribut affectant la valeur des propriétés sur le noeud hôte à l'aide du décorateur @HostBinding.

@HostBinding

Le décorateur @HostBinding nous permet de définir par programmation une valeur de propriété sur l'élément hôte de la directive. Il fonctionne de manière similaire à une liaison de propriété définie dans un modèle, sauf qu'il cible spécifiquement l'élément hôte. La liaison est vérifiée pour chaque cycle de détection des modifications afin de pouvoir changer dynamiquement si vous le souhaitez. Par exemple, disons que nous voulons créer une directive pour les boutons qui ajoutent dynamiquement une classe lorsque nous l'appuyons. Cela pourrait ressembler à quelque chose comme:

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

Notez que pour les deux cas d'utilisation de @HostBinding, nous transmettons une valeur de chaîne pour la propriété que nous voulons affecter. Si nous ne fournissons pas de chaîne au décorateur, le nom du membre de la classe sera utilisé à la place. Dans le premier @HostBinding, nous définissons statiquement l'attribut role sur button. Pour le deuxième exemple, la classe pressée sera appliquée lorsque isPressed est vrai