rainbow.directive.ts

----------------------

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({

  selector: '[appRainbow]'

})

export class RainbowDirective {

  constructor() { }

  

  

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

  }

}

app.module.ts

----------------

import { RainbowDirective } from './rainbow.directive';

@NgModule({

  declarations: [

    AppComponent,

    RainbowDirective

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.html

-----------------------

<input type="text" appRainbow />

PostedBy:pankaj_bhakre