Angular 2
Attribuutrichtlijnen om de waarde van eigenschappen op het hostknooppunt te beïnvloeden door de decorateur @HostBinding te gebruiken.

@HostBinding

Met de decorateur @HostBinding kunnen we programmatisch een eigenschapswaarde instellen op het hostelement van de richtlijn. Het werkt op dezelfde manier als een eigenschapsbinding die in een sjabloon is gedefinieerd, behalve dat het specifiek op het hostelement is gericht. De binding wordt gecontroleerd voor elke wijzigingsdetectiecyclus, zodat deze indien gewenst dynamisch kan worden gewijzigd. Laten we bijvoorbeeld zeggen dat we een richtlijn voor knoppen willen maken die dynamisch een klasse toevoegt wanneer we erop drukken. Dat kan er ongeveer zo uitzien:

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

Merk op dat we voor beide use cases van @HostBinding een stringwaarde doorgeven voor welke eigenschap we willen beïnvloeden. Als we de tekenaar geen tekenreeks geven, wordt in plaats daarvan de naam van het lid van de klas gebruikt. In de eerste @HostBinding stellen we het rolkenmerk statisch in op knop. In het tweede voorbeeld wordt de ingedrukte klasse toegepast wanneer isPressed waar is