feat(playground): add attribute directive example

playground/app/app.component.html

@@ -187,3 +187,15 @@ <h3>Docs examples:</h3>
     <my-title-handler></my-title-handler>
   </div>
 </section>
+
+<!--Attribute Directive-->
+<section class="demo-content">
+  <button
+    class="mdl-button mdl-js-button mdl-button--accent"
+    ng-click="$ctrl.showAttrDirective=!$ctrl.showAttrDirective">
+    {{ $ctrl.showAttrDirective? 'hide' : 'show'}} <code>Attribute Directive</code> example
+  </button>
+  <div ng-if="$ctrl.showAttrDirective">
+    <my-attribute-directive-example></my-attribute-directive-example>
+  </div>
+</section>

playground/app/app.component.ts

@@ -2,10 +2,11 @@ import { Component, Inject, OnInit } from 'ng-metadata/core';
 import { DynamicValueToken, NgRxStore, SomeFactoryFnToken, SomeClassToInstantiate } from './index';
 import { TodoAppCmp } from './todo/todo-app.component';
 import { AsyncExampleComponent } from './components/async-example/async-example.component';
+import { AttributeDirectiveExampleComponent } from './components/attribute-directive/attribute-directive-example.component';
 
 @Component( {
   selector: 'my-app',
-  directives: [ TodoAppCmp, AsyncExampleComponent ],
+  directives: [ TodoAppCmp, AsyncExampleComponent, AttributeDirectiveExampleComponent ],
   templateUrl: './app/app.component.html'
 } )
 export class AppComponent implements OnInit {

playground/app/components/attribute-directive/attribute-directive-example.component.ts

@@ -0,0 +1,28 @@
+import { Component } from 'ng-metadata/core';
+
+import { HighlightDirective } from './highlight.directive';
+
+@Component({
+  selector: 'my-attribute-directive-example',
+  template: `
+    <h1>My First Attribute Directive</h1>
+    <h4>Pick a highlight color</h4>
+    <div>
+      <input type="radio" name="colors" ng-click="$ctrl.color='lightgreen'">Green
+      <input type="radio" name="colors" ng-click="$ctrl.color='yellow'">Yellow
+      <input type="radio" name="colors" ng-click="$ctrl.color='cyan'">Cyan
+    </div>
+
+    <p my-highlight [color]="$ctrl.color" (on-color-click)="$ctrl.colorClicked($event)">Highlight me!</p>
+
+    <p my-highlight [color]="$ctrl.color" [default-color]="'violet'">Highlight me too!</p>
+  `,
+  directives: [HighlightDirective]
+})
+export class AttributeDirectiveExampleComponent {
+  color: string;
+
+  colorClicked(sentence: string){
+    console.log(`color clicked! ${sentence}`);
+  }
+}

playground/app/components/attribute-directive/highlight.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, HostListener, Input, Inject, Output, EventEmitter } from 'ng-metadata/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+  private _defaultColor = 'red';
+  private el: HTMLElement;
+
+  constructor(
+    @Inject('$element') $element: ng.IAugmentedJQuery
+  ) {
+    this.el = $element[0];
+  }
+
+  @Input() set defaultColor(colorName: string){
+    this._defaultColor = colorName || this._defaultColor;
+  }
+
+  @Input('color') highlightColor: string;
+
+  @Output() onColorClick = new EventEmitter<string>();
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    this.highlight(this.highlightColor || this._defaultColor);
+  }
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    this.highlight(null);
+  }
+  @HostListener('click')
+  onClick() {
+    this.onColorClick.emit('yes it was ME!');
+  }
+
+  private highlight(color: string) {
+    this.el.style.backgroundColor = color;
+  }
+}
+/*
+@Input() myHighlight: string;
+*/
+
+
+/*
+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
+*/