import {Component} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {Redify} from './directives';
@Component({
    selector: "app",
    directives:[Redify,HighlightDirective],
    template: `
        <p redify >hello,liaojianguo</p>
        <div>
          <input type="radio"  (click)="color='lightgreen'">Green
          <input type="radio"  (click)="color='yellow'">Yellow
          <input type="radio"  (click)="color='cyan'">Cyan
        </div>
      <p [myHighlight]="color">Highlight me!</p>
    `
})
export class App {
    constructor() {

    }
}


                

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
  selector: '[redify]'
})
export class Redify {
  constructor(private _element: ElementRef, private renderer: Renderer) {
      renderer.setElementStyle(_element.nativeElement, 'color', 'lightgreen');
  }
}

import {Directive, ElementRef, Input} from 'angular2/core';

@Directive({
    selector: '[myHighlight]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})

export class HighlightDirective {

    @Input('myHighlight') highlightColor:string;

    constructor(private el:ElementRef) {
    }

    onMouseEnter() {
        this._highlight(this.highlightColor);
    }

    onMouseLeave() {
        this._highlight(null);
    }

    private _highlight(color:string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}