hightlight

Author: lewis617

directives/src/app.ts

@@ -1,21 +1,31 @@
 import {Component} from 'angular2/core';
 import {bootstrap} from 'angular2/platform/browser';
 import {Redify} from './directives';
+import {HighlightDirective} from './highlight.directive';
 
 @Component({
     selector: "app",
-    directives:[Redify],
+    directives:[Redify,HighlightDirective],
     template: `
+    redify:
       <p redify >hello,lewis</p>
+     myHighlight:
+        <div>
+          <input type="radio" name="colors" (click)="color='lightgreen'">Green
+          <input type="radio" name="colors" (click)="color='yellow'">Yellow
+          <input type="radio" name="colors" (click)="color='cyan'">Cyan
+        </div>
+      <p [myHighlight]="color">Highlight me!</p>
+      <p [myHighlight]="color" [defaultColor]="'violet'">Highlight me too!</p>
     `
 })
 export class App {
-  constructor() {
-   
-  }
+    constructor() {
+
+    }
 }
 
 bootstrap(App, [])
-  .catch(err => console.error(err));
+    .catch(err => console.error(err));
 
 

directives/src/highlight.directive.ts

@@ -0,0 +1,36 @@
+import {Directive, ElementRef, Input} from 'angular2/core';
+
+@Directive({
+  selector: '[myHighlight]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()'
+  }
+})
+
+export class HighlightDirective {
+  /*
+  @Input() myHighlight: string;
+  */
+  @Input('myHighlight') highlightColor: string;
+
+  private _defaultColor = 'red';
+  @Input() set defaultColor(colorName:string){
+    this._defaultColor = colorName || this._defaultColor;
+  }
+
+  constructor(private el: ElementRef) { }
+
+  onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
+  onMouseLeave() { this._highlight(null); }
+
+  private _highlight(color:string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/