docs(toh-3): heavy copy edit; my-hero-detail -> hero-detail

Author: wardbell

public/docs/_examples/toh-2/e2e-spec.ts

@@ -128,6 +128,6 @@ function getPageElts() {
   return {
     heroes: element.all(by.css('my-app li')),
     selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
   };
 }

public/docs/_examples/toh-3/e2e-spec.ts

@@ -128,6 +128,6 @@ function getPageElts() {
   return {
     heroes: element.all(by.css('my-app li')),
     selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
   };
 }

public/docs/_examples/toh-3/ts/app/app.component.1.html

@@ -0,0 +1,12 @@
+<h1>{{title}}</h1>
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #docregion hero-detail-binding -->
+<hero-detail [hero]="selectedHero"></hero-detail>
+<!-- #enddocregion hero-detail-binding -->

public/docs/_examples/toh-3/ts/app/app.component.ts

@@ -31,7 +31,7 @@ const HEROES: Hero[] = [
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
-    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+    <hero-detail [hero]="selectedHero"></hero-detail>
   `,
 // #enddocregion hero-detail-template
   styles: [`

public/docs/_examples/toh-3/ts/app/app.module.ts

@@ -3,22 +3,22 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent }        from './app.component';
 // #docregion hero-detail-import
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import
 
-// #docregion declarations
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule
   ],
+// #docregion declarations
   declarations: [
     AppComponent,
     HeroDetailComponent
   ],
+// #enddocregion declarations
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-// #enddocregion declarations

public/docs/_examples/toh-3/ts/app/hero-detail.component.1.ts

@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion v1
+import { Component } from '@angular/core';
+
+// #enddocregion v1
+// #docregion hero-import
+import { Hero } from './hero';
+// #enddocregion hero-import
+
+// #docregion v1
+@Component({
+  selector: 'hero-detail',
+// #enddocregion v1
+  // #docregion template
+  template: `
+    <div *ngIf="hero">
+      <h2>{{hero.name}} details!</h2>
+      <div><label>id: </label>{{hero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="hero.name" placeholder="name"/>
+      </div>
+    </div>
+  `
+  // #enddocregion template
+// #docregion v1
+})
+export class HeroDetailComponent {
+// #enddocregion v1
+// #docregion hero
+  hero: Hero;
+// #enddocregion hero
+// #docregion v1
+}
+// #enddocregion v1

public/docs/_examples/toh-3/ts/app/hero-detail.component.ts

@@ -1,18 +1,12 @@
-// #docplaster
 // #docregion
-// #docregion v1
+// #docregion import-input
 import { Component, Input } from '@angular/core';
+// #enddocregion import-input
 
-// #enddocregion v1
-// #docregion hero-import
 import { Hero } from './hero';
-// #enddocregion hero-import
 
-// #docregion v1
 @Component({
-  selector: 'my-hero-detail',
-// #enddocregion v1
-  // #docregion template
+  selector: 'hero-detail',
   template: `
     <div *ngIf="hero">
       <h2>{{hero.name}} details!</h2>
@@ -23,17 +17,12 @@ import { Hero } from './hero';
       </div>
     </div>
   `
-  // #enddocregion template
-// #docregion v1
 })
+// #docregion class
 export class HeroDetailComponent {
-// #enddocregion v1
-// #docregion hero-input
-  @Input()
 // #docregion hero
-  hero: Hero;
+  @Input() hero: Hero;
 // #enddocregion hero
-// #enddocregion hero-input
-// #docregion v1
 }
-// #enddocregion v1
+// #docregion class
+

public/docs/_examples/toh-3/ts/plnkr.json

@@ -2,7 +2,8 @@
   "description": "Tour of Heroes: Part 3",
   "files":[
     "!**/*.d.ts",
-    "!**/*.js"
+    "!**/*.js",
+    "!**/*.[1].*"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }

public/docs/_examples/toh-4/e2e-spec.ts

@@ -128,6 +128,6 @@ function getPageElts() {
   return {
     heroes: element.all(by.css('my-app li')),
     selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
   };
 }

public/docs/_examples/toh-4/ts/app/app.component.1.ts

@@ -17,7 +17,7 @@ import { HeroService } from './hero.service.2';
   <div *ngFor="let hero of heroes" (click)="onSelect(hero)">
     {{hero.name}}
   </div>
-  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+  <hero-detail [hero]="selectedHero"></hero-detail>
   `,
   // #docregion providers
   providers: [HeroService]