/*
@HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives.
@HostBinding lets you set properties on the element or component that hosts the directive, and
@HostListener lets you listen for events on the host element or component.
*/
// example directive that listen’s for a keydown event on the host and sets its text and border color
// to a random color from a set of a few available colors:
import {Directive,HostBinding,HostListener } from '@angular/core';
@Directive({
selector: '[appRainbow]'
})
export class RainbowDirective {
possibleColors = [
'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
];
@HostBinding('style.color') color: string;
@HostBinding('style.border-color') borderColor: string;
@HostListener('keydown') newColor() {
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
}
// And the directive can be used on elements like this:
// <input type="text" appRainbow>
// Our Rainbow directive uses two @HostBinding decorators to define two class members,
// one that’s attached to the host’s style.color binding and the other to style.border-color.
// The @HostListner with the 'keydown' argument listens for the keydown event on the host.
// We define a function attached to this decorator that changes the value of color and borderColor,
// and our changes get reflected on the host automatically.