/*
@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.