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

aio/content/examples/attribute-directives/e2e-spec.ts

@@ -15,7 +15,7 @@ describe('Attribute directives', function () {
   });
 
   it('should be able to select green highlight', function () {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
     let lightGreen = 'rgba(144, 238, 144, 1)';
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);

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

@@ -2,19 +2,13 @@
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
 <p myHighlight>Highlight me!</p>
-<!-- #enddocregion applied -->
-<!-- #enddocregion -->
+<!-- #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 -->
-
-<!-- #docregion p-style-background -->
-<p [style.background]="'lime'">I am green with envy!</p>
-<!-- #enddocregion p-style-background -->

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

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })
@@ -9,4 +8,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color = 'yellow';
 }
-// #enddocregion class

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

@@ -1,5 +1,4 @@
-<!-- #docregion -->
-<!-- #docregion v2 -->
+<!-- #docregion v2, -->
 <h1>My First Attribute Directive</h1>
 
 <h4>Pick a highlight color</h4>
@@ -10,15 +9,13 @@
 </div>
 <!-- #docregion color -->
 <p [myHighlight]="color">Highlight me!</p>
-<!-- #enddocregion color -->
-<!-- #enddocregion v2 -->
+<!-- #enddocregion color, v2 -->
 
 <!-- #docregion defaultColor -->
 <p [myHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
-<!-- #enddocregion defaultColor -->
-<!-- #enddocregion -->
+<!-- #enddocregion defaultColor, -->
 
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>

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

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
@@ -10,5 +9,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color: string;
 }
-// #enddocregion class
-// #enddocregion

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

@@ -10,17 +10,6 @@ export class HighlightDirective {
   // #docregion ctor
   constructor(private el: ElementRef) { }
   // #enddocregion ctor
-  // #enddocregion
-
-  // #docregion color
-  @Input() highlightColor: string;
-  // #enddocregion color
-
-  // #docregion color-2
-  @Input() myHighlight: string;
-  // #enddocregion color-2
-
-  // #docregion
 
   // #docregion mouse-methods, host
   @HostListener('mouseenter') onMouseEnter() {
@@ -39,7 +28,14 @@ export class HighlightDirective {
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods
+  // #enddocregion mouse-methods, 
 
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
 }
-// #enddocregion
+

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

@@ -1,7 +1,5 @@
 /* tslint:disable:member-ordering */
-// #docplaster
-// #docregion
-// #docregion imports
+// #docregion imports, 
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 

aio/content/examples/attribute-directives/ts/plnkr.no-link.html

@@ -1,253 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  templateUrl: './app.component.html'
-})
-export class AppComponent {
-  color: 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
-*/"><input type="hidden" name="files[app/app.module.ts]" value="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 { }
-
-
-/*
-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
-*/"><input type="hidden" name="files[app/highlight.directive.ts]" value="/* tslint:disable:member-ordering */
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-
-@Directive({
-  selector: '[myHighlight]'
-})
-export class HighlightDirective {
-
-  constructor(private el: ElementRef) { }
-
-  @Input() defaultColor: string;
-
-  @Input('myHighlight') highlightColor: string;
-
-  @HostListener('mouseenter') onMouseEnter() {
-    this.highlight(this.highlightColor || this.defaultColor || 'red');
-  }
-
-  @HostListener('mouseleave') 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
-*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-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
-*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-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
-*/"><input type="hidden" name="files[app/app.component.html]" value="<h1>My First Attribute Directive</h1>
-
-<h4>Pick a highlight color</h4>
-<div>
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='lightgreen'&quot;>Green
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='yellow'&quot;>Yellow
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='cyan'&quot;>Cyan
-</div>
-<p [myHighlight]=&quot;color&quot;>Highlight me!</p>
-
-<p [myHighlight]=&quot;color&quot; defaultColor=&quot;violet&quot;>
-  Highlight me too!
-</p>
-
-<hr>
-<p><i>Mouse over the following lines to see fixed highlights</i></p>
-
-<p [myHighlight]=&quot;'yellow'&quot;>Highlighted in yellow</p>
-<p myHighlight=&quot;orange&quot;>Highlighted in orange</p>
-
-
-<!-- 
-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
--->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset=&quot;UTF-8&quot;>
-    <title>Attribute Directives</title>
-    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-
-    <!-- Polyfills -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-  <body>
-    <my-app>loading...</my-app>
-  </body>
-</html>
-
-
-<!-- 
-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
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="attribute"><input type="hidden" name="tags[3]" value="directive"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Attribute Directive"></form><script>document.getElementById("mainForm").submit();</script></body></html>