docs(aio): update migrated content from anguar.io

aio/content/examples/attribute-directives/src/app/app.component.1.html

@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<h1>My First Attribute Directive</h1>
+<!-- #docregion applied -->
+<p myHighlight>Highlight me!</p>
+<!-- #enddocregion applied,  -->
+
+<!-- #docregion color-1 -->
+<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
+<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+<!-- #enddocregion color-1 -->
+
+<!-- #docregion color-2 -->
+<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<!-- #enddocregion color-2 -->

aio/content/examples/attribute-directives/src/app/app.component.1.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.1.html'
+})
+// #docregion class
+export class AppComponent {
+  color = 'yellow';
+}

aio/content/examples/attribute-directives/src/app/app.component.html

@@ -0,0 +1,24 @@
+<!-- #docregion v2, -->
+<h1>My First Attribute Directive</h1>
+
+<h4>Pick a highlight color</h4>
+<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>
+<!-- #docregion color -->
+<p [myHighlight]="color">Highlight me!</p>
+<!-- #enddocregion color, v2 -->
+
+<!-- #docregion defaultColor -->
+<p [myHighlight]="color" defaultColor="violet">
+  Highlight me too!
+</p>
+<!-- #enddocregion defaultColor, -->
+
+<hr>
+<p><i>Mouse over the following lines to see fixed highlights</i></p>
+
+<p [myHighlight]="'yellow'">Highlighted in yellow</p>
+<p myHighlight="orange">Highlighted in orange</p>

aio/content/examples/attribute-directives/src/app/app.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+// #docregion class
+export class AppComponent {
+  color: string;
+}

aio/content/examples/attribute-directives/src/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/attribute-directives/src/app/dummy.module.1.ts

@@ -0,0 +1,17 @@
+// Not used. Keep away from plunker
+// Keeps ATLS from complaining about undeclared directives.
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }               from './app.component.1';
+import { HighlightDirective as HLD1 } from './highlight.directive.1';
+import { HighlightDirective as HLD2 } from './highlight.directive.2';
+import { HighlightDirective as HLD3 } from './highlight.directive.3';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent, HLD1, HLD2, HLD3
+  ]
+})
+export class DummyModule { }

aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -0,0 +1,10 @@
+/* tslint:disable:no-unused-variable */
+// #docregion
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({ selector: '[myHighlight]' })
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'yellow';
+    }
+}

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -0,0 +1,41 @@
+/* tslint:disable:no-unused-variable member-ordering */
+// #docplaster
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+  // #docregion ctor
+  constructor(private el: ElementRef) { }
+  // #enddocregion ctor
+
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter') onMouseEnter() {
+    // #enddocregion host
+    this.highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    // #enddocregion host
+    this.highlight(null);
+    // #docregion host
+  }
+  // #enddocregion host
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+  // #enddocregion mouse-methods, 
+
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
+}
+

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:member-ordering */
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @Input('myHighlight') highlightColor: string;
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -0,0 +1,34 @@
+/* tslint:disable:member-ordering */
+// #docregion imports, 
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+// #enddocregion imports
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  // #docregion defaultColor
+  @Input() defaultColor: string;
+  // #enddocregion defaultColor
+
+  // #docregion color
+  @Input('myHighlight') highlightColor: string;
+  // #enddocregion color
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this.defaultColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}

aio/content/examples/attribute-directives/src/index.html

@@ -0,0 +1,25 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Attribute Directives</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>loading...</my-app>
+  </body>
+</html>

aio/content/examples/attribute-directives/src/main.ts

@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);