feat(hero): added highlight directive

Author: Ismaestro

app/app.component.html

@@ -1,3 +1,3 @@
-<h1>{{title}}</h1>
+<h1 tohHighlight>{{title}}</h1>
 <toh-nav></toh-nav>
 <router-outlet></router-outlet>

app/app.module.ts

@@ -15,6 +15,8 @@ import { InMemoryDataService }  from './shared/in-memory-data.service';
 import { AppComponent }     from './app.component';
 import { HeroTopComponent } from './heroes/hero-top/hero-top.component';
 
+import { HighlightDirective } from "./shared/highlight.directive";
+
 import './shared/rxjs-extensions';
 
 @NgModule({
@@ -29,7 +31,8 @@ import './shared/rxjs-extensions';
     ],
     declarations: [
         AppComponent,
-        HeroTopComponent
+        HeroTopComponent,
+        HighlightDirective
     ],
     providers: [
         { provide: APP_CONFIG, useValue: AppConfig }

app/heroes/hero-list/hero-list.component.html

@@ -18,5 +18,6 @@ <h2>My Heroes</h2>
     <h2>
         {{selectedHero.name | uppercase}} is my hero
     </h2>
+    <p tohHighlight>Test</p>
     <button (click)="gotoDetail()">View Details</button>
 </div>

app/shared/highlight.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({ selector: '[tohHighlight]' })
+
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+        el.nativeElement.style.backgroundColor = 'yellow';
+    }
+}