title: Communication between custom directive and component in Angular2
body: <p>I have a template which has textbox, one 'span' tag and one 'div' tag. </p>
  
  <p>'div' tag has 'selectedColor' custom directive. I want to change background color of 'span' and 'div' tags when input value is changed. </p>
  
  <p>So finally I want my directive to react on input change and sets background color of 'div' tag. </p>
  
  <p>I also want to change 'span' background color on input value change event.</p>
  
  <p><a href="http://plnkr.co/edit/IFSWwAwvHCRTi7CjYXru?p=preview" rel="nofollow">Plunker</a></p>
  
  <p><strong>boot.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component,bind} from 'angular2/core';
  
  import {bootstrap} from 'angular2/platform/browser';
  import {FORM_DIRECTIVES} from 'angular2/form';
  import {selectedColorDirective} from 'src/directive';
  import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
  
  @Component({
    selector: 'my-app',
    template: `
        &lt;input type="text" [(ngModel)]="color"  /&gt;
        &lt;br&gt;
        &lt;span &gt; I'm {{color}} color &lt;span&gt;
        &lt;div [mySelectedColor]="color"&gt; I'm {{color}} color &lt;/div&gt;
      `,
      directives: [selectedColorDirective]
  })
  
  export class AppComponent{
  
    color:string;
    constructor(el:ElementRef,renderer:Renderer)
    {
      this.color="Yellow";
      renderer.setElementStyle(el, 'backgroundColor', this.color);
    }
   }
  
      bootstrap(AppComponent, []);
  </code></pre>
  
  <p><strong>directive.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
  
  @Directive({
  
    selector:"[mySelectedColor]", 
      host: {
      // '(keyup)': 'changeColor()',
      '(blur)': 'changeColor()',
    }
  
    })
  
    export class selectedColorDirective{ 
  
      @Input('mySelectedColor') selectedColor: string;
  
      constructor(el: ElementRef, renderer: Renderer) {
          //el.nativeElement.style.backgroundColor = 'yellow'; 
         renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
      } 
  
      changeColor(color:string)
      {
         console.log('Changed Detection' + " " + selectedColor);
         //this.renderer.setElementStyle(this.el, 'backgroundColor', this.color);
       }
    }
  </code></pre>
  
  <p>Moreover if you could explain more about @Input decorator.</p>