diff --git a/aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000000..fa35fd0f05
--- /dev/null
+++ b/aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Tour of Heroes', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display "Tour of Heroes"', () => {
+    let title = element(by.css('app-root h1')).getText();
+    expect(title).toEqual('Tour of Heroes');
+  });
+});
diff --git a/aio/content/examples/toh-pt0/example-config.json b/aio/content/examples/toh-pt0/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt0/plnkr.json b/aio/content/examples/toh-pt0/plnkr.json
new file mode 100644
index 0000000000..3caa575acd
--- /dev/null
+++ b/aio/content/examples/toh-pt0/plnkr.json
@@ -0,0 +1,10 @@
+{
+  "description": "Tour of Heroes: Part 0",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.css b/aio/content/examples/toh-pt0/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.html b/aio/content/examples/toh-pt0/src/app/app.component.html
new file mode 100644
index 0000000000..6213adcb47
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.html
@@ -0,0 +1 @@
+<h1>{{title}}</h1>
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.spec.ts b/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
new file mode 100644
index 0000000000..9510495a2d
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.ts b/aio/content/examples/toh-pt0/src/app/app.component.ts
new file mode 100644
index 0000000000..8391a7e645
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+// #docregion set-title
+  title = 'Tour of Heroes';
+// #enddocregion set-title
+}
diff --git a/aio/content/examples/toh-pt0/src/app/app.module.ts b/aio/content/examples/toh-pt0/src/app/app.module.ts
new file mode 100644
index 0000000000..f65716351a
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt0/src/index.html b/aio/content/examples/toh-pt0/src/index.html
new file mode 100644
index 0000000000..1c4106381f
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt4/src/main.1.ts b/aio/content/examples/toh-pt0/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-pt4/src/main.1.ts
rename to aio/content/examples/toh-pt0/src/main.ts
diff --git a/aio/content/examples/toh-pt5/src/styles.1.css b/aio/content/examples/toh-pt0/src/styles.1.css
similarity index 92%
rename from aio/content/examples/toh-pt5/src/styles.1.css
rename to aio/content/examples/toh-pt0/src/styles.1.css
index d01a0195db..7c4c2fe4c6 100644
--- a/aio/content/examples/toh-pt5/src/styles.1.css
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@@ -1,4 +1,4 @@
-/* Master Styles */
+/* Application-wide Styles */
 h1 {
   color: #369;
   font-family: Arial, Helvetica, sans-serif;
diff --git a/aio/content/examples/toh-pt1/app/app.component.1.ts b/aio/content/examples/toh-pt1/app/app.component.1.ts
deleted file mode 100644
index cebe8e6759..0000000000
--- a/aio/content/examples/toh-pt1/app/app.component.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-let t = {
-// #docregion show-hero
-template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
-// #enddocregion show-hero
-};
-
-t = {
-// #docregion show-hero-2
-template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
-// #enddocregion show-hero-2
-};
-
-t = {
-// #docregion multi-line-strings
-template: `
-  <h1>{{title}}</h1>
-  <h2>{{hero.name}} details!</h2>
-  <div><label>id: </label>{{hero.id}}</div>
-  <div><label>name: </label>{{hero.name}}</div>
-  `
-// #enddocregion multi-line-strings
-};
-
-
-/*
-// #docregion name-input
-<div>
-  <label>name: </label>
-  <input [(ngModel)]="hero.name" placeholder="name">
-</div>
-// #enddocregion name-input
-*/
-
-/////////////////
-
-@Component(t)
-// #docregion app-component-1
-export class AppComponent {
-  title = 'Tour of Heroes';
-  hero = 'Windstorm';
-}
-// #enddocregion app-component-1
diff --git a/aio/content/examples/toh-pt1/e2e-spec.ts b/aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
similarity index 89%
rename from aio/content/examples/toh-pt1/e2e-spec.ts
rename to aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
index b684a358fd..c8d2214f2b 100644
--- a/aio/content/examples/toh-pt1/e2e-spec.ts
+++ b/aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
@@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 
 class Hero {
   id: number;
@@ -49,7 +49,7 @@ describe('Tutorial part 1', () => {
     let page = getPageElts();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(expectedHero.id);
-    expect(hero.name).toEqual(expectedHero.name);
+    expect(hero.name).toEqual(expectedHero.name.toUpperCase());
   });
 
   it(`shows updated hero name`, async () => {
@@ -58,13 +58,13 @@ describe('Tutorial part 1', () => {
     let hero = await Hero.fromDetail(page.heroDetail);
     let newName = expectedHero.name + nameSuffix;
     expect(hero.id).toEqual(expectedHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
   });
 
 });
 
 function getPageElts() {
   return {
-    heroDetail: element(by.css('my-app'))
+    heroDetail: element(by.css('app-root'))
   };
 }
diff --git a/aio/content/examples/toh-pt1/plnkr.json b/aio/content/examples/toh-pt1/plnkr.json
index ca75131d96..5ac3b2d3ce 100644
--- a/aio/content/examples/toh-pt1/plnkr.json
+++ b/aio/content/examples/toh-pt1/plnkr.json
@@ -4,7 +4,8 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1].*"
+    "!**/*.[1].*",
+    "!**/dummy.module.ts"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.css b/aio/content/examples/toh-pt1/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.html b/aio/content/examples/toh-pt1/src/app/app.component.html
new file mode 100644
index 0000000000..ee3d478e16
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.ts b/aio/content/examples/toh-pt1/src/app/app.component.ts
index 602781b9ba..c41599e92a 100644
--- a/aio/content/examples/toh-pt1/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt1/src/app/app.component.ts
@@ -1,33 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';
 
-// #docregion hero-class-1
-export class Hero {
-  id: number;
-  name: string;
-}
-// #enddocregion hero-class-1
-
 @Component({
-  selector: 'my-app',
-  // #docregion editing-Hero
-  template: `
-    <h1>{{title}}</h1>
-    <h2>{{hero.name}} details!</h2>
-    <div><label>id: </label>{{hero.id}}</div>
-    <div>
-      <label>name: </label>
-      <input [(ngModel)]="hero.name" placeholder="name">
-    </div>
-    `
-  // #enddocregion editing-Hero
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';
-  // #docregion hero-property-1
-  hero: Hero = {
-    id: 1,
-    name: 'Windstorm'
-  };
-  // #enddocregion hero-property-1
 }
diff --git a/aio/content/examples/toh-pt1/src/app/app.module.ts b/aio/content/examples/toh-pt1/src/app/app.module.ts
index 8e87678efc..1c9d0ac4d3 100644
--- a/aio/content/examples/toh-pt1/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt1/src/app/app.module.ts
@@ -1,18 +1,30 @@
+// #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
+import { NgModule } from '@angular/core';
+// #docregion formsmodule-js-import
+import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
+// #enddocregion formsmodule-js-import
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
+// #docregion heroes-import
+import { HeroesComponent } from './heroes/heroes.component';
+// #enddocregion heroes-import
 
 @NgModule({
+  // #docregion declarations
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  // #enddocregion declarations
+  // #docregion ng-imports
   imports: [
     BrowserModule,
-    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
+    FormsModule
   ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [ AppComponent ]
+  // #enddocregion ng-imports
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/aio/content/examples/toh-pt1/src/app/hero.ts b/aio/content/examples/toh-pt1/src/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
new file mode 100644
index 0000000000..1c71ce26db
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@@ -0,0 +1,17 @@
+<!-- #docregion show-hero-1 -->
+{{hero}}
+<!-- #enddocregion show-hero-1 -->
+
+<!-- #docregion show-hero-2 -->
+<h2>{{ hero.name }} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
+<!-- #enddocregion show-hero-2 -->
+
+<!-- #docregion name-input -->
+<div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
+</div>
+<!-- #enddocregion name-input -->
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..e1f98c577f
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@@ -0,0 +1,10 @@
+<!-- #docregion -->
+<!-- #docregion pipe -->
+<h2>{{ hero.name | uppercase }} Details</h2>
+<!-- #enddocregion pipe -->
+<div><span>id: </span>{{hero.id}}</div>
+<div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
+</div>
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..06e5c69f51
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion, v1
+import { Component, OnInit } from '@angular/core';
+// #enddocregion v1
+import { Hero } from '../hero';
+// #docregion v1
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  // #enddocregion, v1
+  /*
+  // #docregion add-hero
+  hero = 'Windstorm';
+  // #enddocregion add-hero
+  */
+  // #docregion
+  // #docregion hero-property-1
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  // #enddocregion hero-property-1
+  // #docregion v1
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+// #enddocregion, v1
diff --git a/aio/content/examples/toh-pt1/src/index.html b/aio/content/examples/toh-pt1/src/index.html
index bf9dae3ab7..1c4106381f 100644
--- a/aio/content/examples/toh-pt1/src/index.html
+++ b/aio/content/examples/toh-pt1/src/index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt2/e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
similarity index 91%
rename from aio/content/examples/toh-pt2/e2e-spec.ts
rename to aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
index 53474d98b3..ea2c445804 100644
--- a/aio/content/examples/toh-pt2/e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
@@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
@@ -85,7 +85,7 @@ function selectHeroTests() {
     let page = getPageElts();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
   });
 }
 
@@ -100,7 +100,7 @@ function updateHeroTests() {
     let hero = await Hero.fromDetail(page.heroDetail);
     let newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
   });
 
   it(`shows updated hero name in list`, async () => {
@@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
 
 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 > hero-detail > div'))
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.1.html b/aio/content/examples/toh-pt2/src/app/app.component.1.html
deleted file mode 100644
index 86f8228723..0000000000
--- a/aio/content/examples/toh-pt2/src/app/app.component.1.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!-- #docregion ng-for -->
-<li *ngFor="let hero of heroes">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-<!-- #enddocregion ng-for -->
-
-<!-- #docregion heroes-styled -->
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li *ngFor="let hero of heroes">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
-  </li>
-</ul>
-<!-- #enddocregion heroes-styled -->
-
-<!-- #docregion selectedHero-click -->
-<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
-  ...
-</li>
-<!-- #enddocregion selectedHero-click -->
-
-<!-- #docregion selectedHero-details -->
-<h2>{{selectedHero.name}} details!</h2>
-<div><label>id: </label>{{selectedHero.id}}</div>
-<div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-</div>
-<!-- #enddocregion selectedHero-details -->
-
-<!-- #docregion ng-if -->
-<div *ngIf="selectedHero">
-  <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-  </div>
-</div>
-<!-- #enddocregion ng-if -->
-
-<!-- #docregion hero-array-1 -->
-heroes = HEROES;
-<!-- #enddocregion hero-array-1 -->
-
-<!-- #docregion heroes-template-1 -->
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li>
-    <!-- each hero goes here -->
-  </li>
-</ul>
-<!-- #enddocregion heroes-template-1 -->
-
-<!-- #docregion heroes-ngfor-1 -->
-<li *ngFor="let hero of heroes">
-<!-- #enddocregion heroes-ngfor-1 -->
-
-<!-- #docregion class-selected-1 -->
-[class.selected]="hero === selectedHero"
-<!-- #enddocregion class-selected-1 -->
-
-<!-- #docregion class-selected-2 -->
-<li *ngFor="let hero of heroes"
-  [class.selected]="hero === selectedHero"
-  (click)="onSelect(hero)">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-<!-- #enddocregion class-selected-2 -->
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.css b/aio/content/examples/toh-pt2/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.html b/aio/content/examples/toh-pt2/src/app/app.component.html
new file mode 100644
index 0000000000..ee3d478e16
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.ts b/aio/content/examples/toh-pt2/src/app/app.component.ts
index 3e7c86f150..c41599e92a 100644
--- a/aio/content/examples/toh-pt2/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt2/src/app/app.component.ts
@@ -1,109 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';
 
-export class Hero {
-  id: number;
-  name: string;
-}
-
-// #docregion hero-array
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
-// #enddocregion hero-array
-
 @Component({
-  selector: 'my-app',
-  template: `
-    <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>
-    <div *ngIf="selectedHero">
-      <h2>{{selectedHero.name}} details!</h2>
-      <div><label>id: </label>{{selectedHero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-      </div>
-    </div>
-  `,
-  // #docregion styles
-  styles: [`
-    .selected {
-      background-color: #CFD8DC !important;
-      color: white;
-    }
-    .heroes {
-      margin: 0 0 2em 0;
-      list-style-type: none;
-      padding: 0;
-      width: 15em;
-    }
-    .heroes li {
-      cursor: pointer;
-      position: relative;
-      left: 0;
-      background-color: #EEE;
-      margin: .5em;
-      padding: .3em 0;
-      height: 1.6em;
-      border-radius: 4px;
-    }
-    .heroes li.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
-    .heroes .text {
-      position: relative;
-      top: -3px;
-    }
-    .heroes .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;
-    }
-  `]
-  // #enddocregion styles
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';
-  heroes = HEROES;
-  // #docregion selected-hero
-  selectedHero: Hero;
-  // #enddocregion selected-hero
-
-  // #docregion on-select
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
-  // #enddocregion on-select
 }
diff --git a/aio/content/examples/toh-pt2/src/app/app.module.ts b/aio/content/examples/toh-pt2/src/app/app.module.ts
index 4c0b77ea48..bc5d60226c 100644
--- a/aio/content/examples/toh-pt2/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt2/src/app/app.module.ts
@@ -1,18 +1,20 @@
-// #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
 
 @NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
   imports: [
     BrowserModule,
     FormsModule
   ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [ AppComponent ]
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/aio/content/examples/toh-pt2/src/app/hero.ts b/aio/content/examples/toh-pt2/src/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
new file mode 100644
index 0000000000..fe140484f5
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
@@ -0,0 +1,20 @@
+<!-- #docregion list -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #enddocregion list -->
+
+<!-- #docregion li -->
+  <li *ngFor="let hero of heroes">
+<!-- #enddocregion li -->
+
+<!-- #docregion selectedHero-click -->
+<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+<!-- #enddocregion selectedHero-click -->
+
+<!-- #docregion class-selected -->
+[class.selected]="hero === selectedHero"
+<!-- #enddocregion class-selected -->
diff --git a/aio/content/examples/toh-pt5/src/app/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
similarity index 79%
rename from aio/content/examples/toh-pt5/src/app/heroes.component.css
rename to aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
index b49fa0a419..e956eab987 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* HeroesComponent's private CSS styles */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -19,15 +19,15 @@
   height: 1.6em;
   border-radius: 4px;
 }
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
 .heroes li:hover {
   color: #607D8B;
   background-color: #DDD;
   left: .1em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
-  color: white;
-}
 .heroes .text {
   position: relative;
   top: -3px;
@@ -46,15 +46,3 @@
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..a233263d84
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@@ -0,0 +1,27 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <!-- #docregion li -->
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+  <!-- #enddocregion li -->
+</ul>
+
+<!-- #docregion ng-if -->
+<div *ngIf="selectedHero">
+
+  <!-- #docregion selectedHero-details -->
+  <h2>{{ selectedHero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{selectedHero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="selectedHero.name" placeholder="name">
+    </label>
+  </div>
+  <!-- #enddocregion selectedHero-details -->
+
+</div>
+<!-- #enddocregion ng-if -->
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..bee5856586
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+// #docregion import-heroes
+import { HEROES } from '../mock-heroes';
+// #enddocregion import-heroes
+
+// #docplaster
+// #docregion metadata
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+// #enddocregion metadata
+export class HeroesComponent implements OnInit {
+
+  // #docregion heroes
+  heroes = HEROES;
+  // #enddocregion heroes
+
+  // #docregion on-select
+  selectedHero: Hero;
+
+  // #enddocregion on-select
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  // #docregion on-select
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+  // #enddocregion on-select
+}
diff --git a/aio/content/examples/toh-pt2/src/app/mock-heroes.ts b/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
new file mode 100644
index 0000000000..e84c2fd2b0
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
diff --git a/aio/content/examples/toh-pt2/src/index.html b/aio/content/examples/toh-pt2/src/index.html
index bf9dae3ab7..1c4106381f 100644
--- a/aio/content/examples/toh-pt2/src/index.html
+++ b/aio/content/examples/toh-pt2/src/index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
deleted file mode 100644
index fec477fbd7..0000000000
--- a/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #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
diff --git a/aio/content/examples/toh-pt3/e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
similarity index 91%
rename from aio/content/examples/toh-pt3/e2e-spec.ts
rename to aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
index 2699ac8ccd..5c1f4028db 100644
--- a/aio/content/examples/toh-pt3/e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
@@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
@@ -85,7 +85,7 @@ function selectHeroTests() {
     let page = getPageElts();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
   });
 }
 
@@ -100,7 +100,7 @@ function updateHeroTests() {
     let hero = await Hero.fromDetail(page.heroDetail);
     let newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
   });
 
   it(`shows updated hero name in list`, async () => {
@@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
 
 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 > hero-detail > div'))
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.css b/aio/content/examples/toh-pt3/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.html b/aio/content/examples/toh-pt3/src/app/app.component.html
new file mode 100644
index 0000000000..ee3d478e16
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.ts b/aio/content/examples/toh-pt3/src/app/app.component.ts
index 3e242914aa..c41599e92a 100644
--- a/aio/content/examples/toh-pt3/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt3/src/app/app.component.ts
@@ -1,95 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';
 
-// #docregion hero-import
-import { Hero } from './hero';
-// #enddocregion hero-import
-
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
-
 @Component({
-  selector: 'my-app',
-// #docregion hero-detail-template
-  template: `
-    <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>
-    <hero-detail [hero]="selectedHero"></hero-detail>
-  `,
-// #enddocregion hero-detail-template
-  styles: [`
-    .selected {
-      background-color: #CFD8DC !important;
-      color: white;
-    }
-    .heroes {
-      margin: 0 0 2em 0;
-      list-style-type: none;
-      padding: 0;
-      width: 15em;
-    }
-    .heroes li {
-      cursor: pointer;
-      position: relative;
-      left: 0;
-      background-color: #EEE;
-      margin: .5em;
-      padding: .3em 0;
-      height: 1.6em;
-      border-radius: 4px;
-    }
-    .heroes li.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
-    .heroes .text {
-      position: relative;
-      top: -3px;
-    }
-    .heroes .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;
-    }
-  `]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';
-  heroes = HEROES;
-  selectedHero: Hero;
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
 }
diff --git a/aio/content/examples/toh-pt3/src/app/app.module.ts b/aio/content/examples/toh-pt3/src/app/app.module.ts
index e04b8d304b..39fe27d3cf 100644
--- a/aio/content/examples/toh-pt3/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt3/src/app/app.module.ts
@@ -1,24 +1,22 @@
-// #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }        from './app.component';
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
 @NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent
+  ],
   imports: [
     BrowserModule,
     FormsModule
   ],
-// #docregion declarations
-  declarations: [
-    AppComponent,
-    HeroDetailComponent
-  ],
-// #enddocregion declarations
-  bootstrap: [ AppComponent ]
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
deleted file mode 100644
index 45a1a1e7e1..0000000000
--- a/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-// #docregion import-input
-import { Component, Input } from '@angular/core';
-// #enddocregion import-input
-
-import { Hero } from './hero';
-// #docregion template
-@Component({
-  selector: 'hero-detail',
-  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 class
-export class HeroDetailComponent {
-// #docregion hero
-  @Input() hero: Hero;
-// #enddocregion hero
-}
-// #enddocregion class
-
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..b2b52432a0
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,11 @@
+<div *ngIf="hero">
+
+  <h2>{{ hero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..973c5b2b5a
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+// #docregion import-input
+import { Component, OnInit, Input } from '@angular/core';
+// #enddocregion import-input
+// #docregion import-hero
+import { Hero } from '../hero';
+// #enddocregion import-hero
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  // #docregion input-hero
+  @Input() hero: Hero;
+  // #enddocregion input-hero
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt3/src/app/hero.ts b/aio/content/examples/toh-pt3/src/app/hero.ts
index f4b0cd6b35..8f7cc205c8 100644
--- a/aio/content/examples/toh-pt3/src/app/hero.ts
+++ b/aio/content/examples/toh-pt3/src/app/hero.ts
@@ -3,4 +3,3 @@ export class Hero {
   id: number;
   name: string;
 }
-// #enddocregion
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..e956eab987
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
@@ -0,0 +1,48 @@
+/* HeroesComponent's private CSS styles */
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .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;
+}
diff --git a/aio/content/examples/toh-pt3/app/app.component.1.html b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
similarity index 81%
rename from aio/content/examples/toh-pt3/app/app.component.1.html
rename to aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
index 8b6c3b0d82..2a78dbaa33 100644
--- a/aio/content/examples/toh-pt3/app/app.component.1.html
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
@@ -1,5 +1,5 @@
-<h1>{{title}}</h1>
 <h2>My Heroes</h2>
+
 <ul class="heroes">
   <li *ngFor="let hero of heroes"
     [class.selected]="hero === selectedHero"
@@ -7,6 +7,7 @@
     <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
 </ul>
+
 <!-- #docregion hero-detail-binding -->
-<hero-detail [hero]="selectedHero"></hero-detail>
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
 <!-- #enddocregion hero-detail-binding -->
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..35462026c7
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HEROES } from '../mock-heroes';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+
+  heroes = HEROES;
+
+  selectedHero: Hero;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+}
+
diff --git a/aio/content/examples/toh-pt3/src/app/mock-heroes.ts b/aio/content/examples/toh-pt3/src/app/mock-heroes.ts
new file mode 100644
index 0000000000..e84c2fd2b0
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
diff --git a/aio/content/examples/toh-pt3/src/index.html b/aio/content/examples/toh-pt3/src/index.html
index bf9dae3ab7..1c4106381f 100644
--- a/aio/content/examples/toh-pt3/src/index.html
+++ b/aio/content/examples/toh-pt3/src/index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt3/src/main.ts b/aio/content/examples/toh-pt3/src/main.ts
index fd8f859f5c..6fd45e7d1e 100644
--- a/aio/content/examples/toh-pt3/src/main.ts
+++ b/aio/content/examples/toh-pt3/src/main.ts
@@ -1,4 +1,4 @@
-// #docregion pt1
+// #docregion
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -10,4 +10,4 @@ if (environment.production) {
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion pt1
+// #enddocregion
diff --git a/aio/content/examples/toh-pt4/e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/app.e2e-spec.ts
similarity index 91%
rename from aio/content/examples/toh-pt4/e2e-spec.ts
rename to aio/content/examples/toh-pt4/e2e/app.e2e-spec.ts
index 3a008d27f4..bd71754bbb 100644
--- a/aio/content/examples/toh-pt4/e2e-spec.ts
+++ b/aio/content/examples/toh-pt4/e2e/app.e2e-spec.ts
@@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
@@ -85,7 +85,7 @@ function selectHeroTests() {
     let page = getPageElts();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
   });
 }
 
@@ -100,7 +100,7 @@ function updateHeroTests() {
     let hero = await Hero.fromDetail(page.heroDetail);
     let newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
   });
 
   it(`shows updated hero name in list`, async () => {
@@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
 
 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 > hero-detail > div'))
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.1.ts b/aio/content/examples/toh-pt4/src/app/app.component.1.ts
deleted file mode 100644
index cfddbab537..0000000000
--- a/aio/content/examples/toh-pt4/src/app/app.component.1.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// #docplaster
-// #docregion on-init
-import { OnInit } from '@angular/core';
-
-// #enddocregion on-init
-import { Component } from '@angular/core';
-
-import { Hero } from './hero';
-// #docregion hero-service-import
-import { HeroService } from './hero.service.2';
-// #enddocregion hero-service-import
-
-// Testable but never shown
-@Component({
-  selector: 'my-app',
-  template: `
-  <div *ngFor="let hero of heroes" (click)="onSelect(hero)">
-    {{hero.name}}
-  </div>
-  <hero-detail [hero]="selectedHero"></hero-detail>
-  `,
-  // #docregion providers
-  providers: [HeroService]
-  // #enddocregion providers
-})
-// #docregion on-init
-export class AppComponent implements OnInit {
-  // #enddocregion on-init
-  title = 'Tour of Heroes';
-  // #docregion heroes-prop
-  heroes: Hero[];
-  // #enddocregion heroes-prop
-  selectedHero: Hero;
-
-  /*
-  // #docregion new-service
-  heroService = new HeroService(); // don't do this
-  // #enddocregion new-service
-  */
-  // #docregion ctor
-  constructor(private heroService: HeroService) { }
-  // #enddocregion ctor
-  // #docregion getHeroes
-  getHeroes(): void {
-    // #docregion get-heroes
-    this.heroes = this.heroService.getHeroes();
-    // #enddocregion get-heroes
-  }
-  // #enddocregion getHeroes
-
-  // #docregion ng-on-init
-  // #docregion on-init
-  ngOnInit(): void {
-    // #enddocregion on-init
-    this.getHeroes();
-    // #docregion on-init
-  }
-  // #enddocregion on-init
-  // #enddocregion ng-on-init
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
-  // #docregion on-init
-}
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.css b/aio/content/examples/toh-pt4/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.html b/aio/content/examples/toh-pt4/src/app/app.component.html
new file mode 100644
index 0000000000..cb45ac499a
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
+<app-messages></app-messages>
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.ts b/aio/content/examples/toh-pt4/src/app/app.component.ts
index 0d57acb5b0..c41599e92a 100644
--- a/aio/content/examples/toh-pt4/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt4/src/app/app.component.ts
@@ -1,97 +1,10 @@
-// #docplaster
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Hero } from './hero';
-// #docregion hero-service-import
-import { HeroService } from './hero.service';
-// #enddocregion hero-service-import
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  // #docregion template
-  template: `
-    <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>
-    <hero-detail [hero]="selectedHero"></hero-detail>
-  `,
-  // #enddocregion template
-  styles: [`
-    .selected {
-      background-color: #CFD8DC !important;
-      color: white;
-    }
-    .heroes {
-      margin: 0 0 2em 0;
-      list-style-type: none;
-      padding: 0;
-      width: 15em;
-    }
-    .heroes li {
-      cursor: pointer;
-      position: relative;
-      left: 0;
-      background-color: #EEE;
-      margin: .5em;
-      padding: .3em 0;
-      height: 1.6em;
-      border-radius: 4px;
-    }
-    .heroes li.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
-    .heroes .text {
-      position: relative;
-      top: -3px;
-    }
-    .heroes .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;
-    }
-  `],
-  providers: [HeroService]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
   title = 'Tour of Heroes';
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService) { }
-
-// #docregion get-heroes
-  getHeroes(): void {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-  }
-// #enddocregion get-heroes
-
-  ngOnInit(): void {
-    this.getHeroes();
-  }
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
 }
diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
index 3df186c62a..70b26976da 100644
--- a/aio/content/examples/toh-pt4/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt4/src/app/app.module.ts
@@ -1,19 +1,28 @@
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }  from './app.component';
-import { HeroDetailComponent } from './hero-detail.component';
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+import { HeroService } from './hero.service';
+import { MessageService } from './message.service';
+import { MessagesComponent } from './messages/messages.component';
 
 @NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent,
+    MessagesComponent
+  ],
   imports: [
     BrowserModule,
     FormsModule
   ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent
-  ],
+  // #docregion providers
+  providers: [ HeroService, MessageService ],
+  // #enddocregion providers
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
deleted file mode 100644
index 865fb98da7..0000000000
--- a/aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-import { Hero } from './hero';
-
-@Component({
-  selector: 'hero-detail',
-  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>
-  `
-})
-export class HeroDetailComponent {
-  @Input() hero: Hero;
-}
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..9195b8aa85
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,9 @@
+<div *ngIf="hero">
+  <h2>{{ hero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+</div>
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..2edf9bba38
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+
+  // #docregion hero
+  @Input() hero: Hero;
+  // #enddocregion hero
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.1.ts b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
index 2366215259..84f5eed9ce 100644
--- a/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
+++ b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
@@ -1,24 +1,24 @@
+/* Newly generated and synchronous versions */
 // #docplaster
-// #docregion
-// #docregion empty-class, full
+// #docregion, new
 import { Injectable } from '@angular/core';
 
-// #enddocregion empty-class
+// #enddocregion new
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 
-// #docregion empty-class, getHeroes-stub
+// #docregion new
 @Injectable()
 export class HeroService {
-  // #enddocregion empty-class, getHeroes-stub, full
-  /*
-  // #docregion getHeroes-stub
-  getHeroes(): void {} // stub
-  // #enddocregion getHeroes-stub
-  */
-  // #docregion full
+
+  constructor() { }
+
+  // #enddocregion new
+  // #docregion getHeroes
   getHeroes(): Hero[] {
     return HEROES;
   }
-  // #docregion empty-class, getHeroes-stub
+  // #enddocregion getHeroes
+  // #docregion new
 }
+// #enddocregion, new
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.2.ts b/aio/content/examples/toh-pt4/src/app/hero.service.2.ts
deleted file mode 100644
index d14fe02410..0000000000
--- a/aio/content/examples/toh-pt4/src/app/hero.service.2.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { Hero } from './hero';
-import { HEROES } from './mock-heroes';
-
-@Injectable()
-export class HeroService {
-
-  getHeroes(): Hero[] {
-    return HEROES;
-  }
-}
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.ts b/aio/content/examples/toh-pt4/src/app/hero.service.ts
index 03a1c10a4a..4129689f5e 100644
--- a/aio/content/examples/toh-pt4/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt4/src/app/hero.service.ts
@@ -1,29 +1,35 @@
 // #docplaster
 // #docregion
-// #docregion just-get-heroes
 import { Injectable } from '@angular/core';
 
+// #docregion import-observable
+import { Observable } from 'rxjs/Rx';
+import { of } from 'rxjs/observable/of';
+// #enddocregion import-observable
+
+// #docregion import-heroes
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
+// #enddocregion import-heroes
+// #docregion import-message-service
+import { MessageService } from './message.service';
+// #enddocregion import-message-service
 
 @Injectable()
 export class HeroService {
-  // #docregion get-heroes
-  getHeroes(): Promise<Hero[]> {
-    return Promise.resolve(HEROES);
-  }
-  // #enddocregion get-heroes, just-get-heroes
-  // #enddocregion
 
-  // See the "Take it slow" appendix
-  // #docregion get-heroes-slowly
-  getHeroesSlowly(): Promise<Hero[]> {
-    return new Promise(resolve => {
-      // Simulate server latency with 2 second delay
-      setTimeout(() => resolve(this.getHeroes()), 2000);
-    });
+  // #docregion ctor
+  constructor(private messageService: MessageService) { }
+  // #enddocregion ctor
+
+  // #docregion getHeroes, getHeroes-1
+  getHeroes(): Observable<Hero[]> {
+    // #enddocregion getHeroes-1
+    // Todo: send the message _after_ fetching the heroes
+    this.messageService.add('HeroService: fetched heroes');
+    // #docregion getHeroes-1
+    return of(HEROES);
   }
-  // #enddocregion get-heroes-slowly
-  // #docregion
-  // #docregion just-get-heroes
+  // #enddocregion getHeroes, getHeroes-1
 }
+// #enddocregion
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts
new file mode 100644
index 0000000000..28de0d1f0a
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts
@@ -0,0 +1,19 @@
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { Observable } from 'rxjs/Observable';
+
+class DummyHeroesComponent {
+
+  heroes: Observable<Hero[]>;
+
+  constructor(private heroService: HeroService) {}
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    // #docregion get-heroes
+    this.heroes = this.heroService.getHeroes();
+    // #enddocregion get-heroes
+  }
+  // #enddocregion getHeroes
+}
+
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..4bef1bb3c4
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -0,0 +1,50 @@
+/* HeroesComponent's private CSS styles */
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..fdddd6823b
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
@@ -0,0 +1,14 @@
+<h2>My Heroes</h2>
+<!-- #docregion list -->
+<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>
+<!-- #enddocregion list -->
+
+<!-- #docregion hero-detail-binding -->
+ <app-hero-detail [hero]="selectedHero"></app-hero-detail>
+<!-- #enddocregion hero-detail-binding -->
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..7fdc68a057
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+// #docregion hero-service-import
+import { HeroService } from '../hero.service';
+// #enddocregion hero-service-import
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+
+  selectedHero: Hero;
+
+  // #docregion heroes
+  heroes: Hero[];
+  // #enddocregion heroes
+
+  // #docregion ctor
+  constructor(private heroService: HeroService) { }
+  // #enddocregion ctor
+
+  // #docregion ng-on-init
+  ngOnInit() {
+    this.getHeroes();
+  }
+  // #enddocregion ng-on-init
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    this.heroService.getHeroes()
+        .subscribe(heroes => this.heroes = heroes);
+  }
+  // #enddocregion getHeroes
+}
diff --git a/aio/content/examples/toh-pt4/src/app/message.service.spec.ts b/aio/content/examples/toh-pt4/src/app/message.service.spec.ts
new file mode 100644
index 0000000000..63ecfd8ff6
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt4/src/app/message.service.ts b/aio/content/examples/toh-pt4/src/app/message.service.ts
new file mode 100644
index 0000000000..9b3a2cac05
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages.length = 0;
+  }
+}
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
new file mode 100644
index 0000000000..d08d9be581
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.html b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
new file mode 100644
index 0000000000..1df7dfd989
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts
new file mode 100644
index 0000000000..3c2b2b1537
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts
new file mode 100644
index 0000000000..8a819207fb
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+// #docregion import-message-service
+import { MessageService } from '../message.service';
+// #enddocregion import-message-service
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  // #docregion ctor
+  constructor(public messageService: MessageService) {}
+  // #enddocregion ctor
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt4/src/index.html b/aio/content/examples/toh-pt4/src/index.html
index bf9dae3ab7..1c4106381f 100644
--- a/aio/content/examples/toh-pt4/src/index.html
+++ b/aio/content/examples/toh-pt4/src/index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt5/e2e-spec.ts b/aio/content/examples/toh-pt5/e2e/app.e2e-spec.ts
similarity index 74%
rename from aio/content/examples/toh-pt5/e2e-spec.ts
rename to aio/content/examples/toh-pt5/e2e/app.e2e-spec.ts
index a49f2ddb62..e94b7e6ca6 100644
--- a/aio/content/examples/toh-pt5/e2e-spec.ts
+++ b/aio/content/examples/toh-pt5/e2e/app.e2e-spec.ts
@@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const targetHero = { id: 15, name: 'Magneta' };
 const targetHeroDashboardIndex = 3;
 const nameSuffix = 'X';
@@ -42,22 +42,19 @@ describe('Tutorial part 5', () => {
   beforeAll(() => browser.get(''));
 
   function getPageElts() {
-    let navElts = element.all(by.css('my-app nav a'));
+    let navElts = element.all(by.css('app-root nav a'));
 
     return {
       navElts: navElts,
 
-      myDashboardHref: navElts.get(0),
-      myDashboard: element(by.css('my-app my-dashboard')),
-      topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
+      appDashboardHref: navElts.get(0),
+      appDashboard: element(by.css('app-root app-dashboard')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
 
-      myHeroesHref: navElts.get(1),
-      myHeroes: element(by.css('my-app my-heroes')),
-      allHeroes: element.all(by.css('my-app my-heroes li')),
-      selectedHero: element(by.css('my-app li.selected')),
-      selectedHeroSubview: element(by.css('my-app my-heroes > div')),
-
-      heroDetail: element(by.css('my-app hero-detail > div'))
+      appHeroesHref: navElts.get(1),
+      appHeroes: element(by.css('app-root app-heroes')),
+      allHeroes: element.all(by.css('app-root app-heroes li')),
+      heroDetail: element(by.css('app-root app-hero-detail > div'))
     };
   }
 
@@ -79,7 +76,7 @@ describe('Tutorial part 5', () => {
 
     it('has dashboard as the active view', () => {
       let page = getPageElts();
-      expect(page.myDashboard.isPresent()).toBeTruthy();
+      expect(page.appDashboard.isPresent()).toBeTruthy();
     });
 
   });
@@ -98,7 +95,7 @@ describe('Tutorial part 5', () => {
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
     it(`saves and shows ${newHeroName} in Dashboard`, () => {
-      element(by.buttonText('Back')).click();
+      element(by.buttonText('go back')).click();
       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
       expect(targetHeroElt.getText()).toEqual(newHeroName);
     });
@@ -110,39 +107,26 @@ describe('Tutorial part 5', () => {
     beforeAll(() => browser.get(''));
 
     it('can switch to Heroes view', () => {
-      getPageElts().myHeroesHref.click();
+      getPageElts().appHeroesHref.click();
       let page = getPageElts();
-      expect(page.myHeroes.isPresent()).toBeTruthy();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
       expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
 
-    it(`selects and shows ${targetHero.name} as selected in list`, () => {
-      getHeroLiEltById(targetHero.id).click();
-      let expectedText = `${targetHero.id} ${targetHero.name}`;
-      expect(getPageElts().selectedHero.getText()).toBe(expectedText);
-    });
-
-    it('shows selected hero subview', async () => {
-      let page = getPageElts();
-      let title = page.selectedHeroSubview.element(by.css('h2')).getText();
-      let expectedTitle = `${targetHero.name.toUpperCase()} is my hero`;
-      expect(title).toEqual(expectedTitle);
-    });
-
     it('can route to hero details', async () => {
-      element(by.buttonText('View Details')).click();
+      getHeroLiEltById(targetHero.id).click();
 
       let page = getPageElts();
       expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       let hero = await Hero.fromDetail(page.heroDetail);
       expect(hero.id).toEqual(targetHero.id);
-      expect(hero.name).toEqual(targetHero.name);
+      expect(hero.name).toEqual(targetHero.name.toUpperCase());
     });
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
     it(`shows ${newHeroName} in Heroes list`, () => {
-      element(by.buttonText('Back')).click();
+      element(by.buttonText('go back')).click();
       let expectedText = `${targetHero.id} ${newHeroName}`;
       expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
     });
@@ -158,7 +142,7 @@ describe('Tutorial part 5', () => {
     expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
   }
 
   async function updateHeroNameInDetailView() {
@@ -168,7 +152,7 @@ describe('Tutorial part 5', () => {
     let page = getPageElts();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newHeroName);
+    expect(hero.name).toEqual(newHeroName.toUpperCase());
   }
 
 });
diff --git a/aio/content/examples/toh-pt5/plnkr.json b/aio/content/examples/toh-pt5/plnkr.json
index db4b15d160..df6999a611 100644
--- a/aio/content/examples/toh-pt5/plnkr.json
+++ b/aio/content/examples/toh-pt5/plnkr.json
@@ -4,7 +4,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1,2,3].*"
+    "!**/*.[0,1,2,3].*"
   ],
   "tags": ["tutorial", "tour", "heroes", "router"]
 }
diff --git a/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts
new file mode 100644
index 0000000000..c855135b75
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class AppRoutingModule { }
diff --git a/aio/content/examples/toh-pt5/src/app/app-routing.module.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
index dfd957782b..bfdcb7d5ec 100644
--- a/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
+++ b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
@@ -1,20 +1,45 @@
-// #docregion
+// #docplaster
+// #docregion , v1
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { DashboardComponent }   from './dashboard.component';
-import { HeroesComponent }      from './heroes.component';
-import { HeroDetailComponent }  from './hero-detail.component';
+// #enddocregion v1
+// #docregion import-dashboard
+import { DashboardComponent }   from './dashboard/dashboard.component';
+// #enddocregion import-dashboard
+// #docregion heroes-route
+import { HeroesComponent }      from './heroes/heroes.component';
+// #enddocregion heroes-route
+// #docregion import-herodetail
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+// #enddocregion import-herodetail
+// #docregion heroes-route
 
+// #docregion routes
 const routes: Routes = [
+  // #enddocregion heroes-route
+  // #docregion redirect-route
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: 'dashboard',  component: DashboardComponent },
+  // #enddocregion redirect-route
+  // #docregion dashboard-route
+  { path: 'dashboard', component: DashboardComponent },
+  // #enddocregion dashboard-route
+  // #docregion detail-route
   { path: 'detail/:id', component: HeroDetailComponent },
-  { path: 'heroes',     component: HeroesComponent }
+  // #enddocregion detail-route
+  // #docregion heroes-route
+  { path: 'heroes', component: HeroesComponent }
 ];
+// #enddocregion routes, heroes-route
 
+// #docregion v1
 @NgModule({
+// #enddocregion v1
+// #docregion ngmodule-imports
   imports: [ RouterModule.forRoot(routes) ],
+// #enddocregion ngmodule-imports
+// #docregion v1
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}
+// #enddocregion , v1
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.1.ts b/aio/content/examples/toh-pt5/src/app/app.component.1.ts
deleted file mode 100644
index c9f5db9712..0000000000
--- a/aio/content/examples/toh-pt5/src/app/app.component.1.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// #docplaster
-// #docregion , v2
-import { Component } from '@angular/core';
-
-// #enddocregion v2
-@Component({
-  selector: 'my-app',
-  template: `
-    <h1>{{title}}</h1>
-    <my-heroes></my-heroes>
-  `
-})
-// #enddocregion
-// #docregion v2
-@Component({
-  selector: 'my-app',
-  // #docregion template-v2
-  template: `
-     <h1>{{title}}</h1>
-     <a routerLink="/heroes">Heroes</a>
-     <router-outlet></router-outlet>
-   `
-  // #enddocregion template-v2
-})
-// #enddocregion
-@Component({
-  selector: 'my-app',
-  // #docregion template-v3
-  template: `
-     <h1>{{title}}</h1>
-     <nav>
-       <a routerLink="/dashboard">Dashboard</a>
-       <a routerLink="/heroes">Heroes</a>
-     </nav>
-     <router-outlet></router-outlet>
-   `
-  // #enddocregion template-v3
-})
-// #docregion , v2
-export class AppComponent {
-  title = 'Tour of Heroes';
-}
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css
index 071e665767..bf741e4575 100644
--- a/aio/content/examples/toh-pt5/src/app/app.component.css
+++ b/aio/content/examples/toh-pt5/src/app/app.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* AppComponent's private CSS styles */
 h1 {
   font-size: 1.2em;
   color: #999;
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.html b/aio/content/examples/toh-pt5/src/app/app.component.html
new file mode 100644
index 0000000000..12e347256e
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app.component.html
@@ -0,0 +1,14 @@
+<!-- #docplaster -->
+<!-- #docregion, heroes, outlet -->
+<h1>{{title}}</h1>
+<!-- #enddocregion outlet -->
+<nav>
+  <!-- #enddocregion heroes -->
+  <a routerLink="/dashboard">Dashboard</a>
+  <!-- #docregion heroes -->
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<!-- #docregion outlet -->
+<router-outlet></router-outlet>
+<app-messages></app-messages>
+<!-- #enddocregion, heroes, outlet -->
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.ts b/aio/content/examples/toh-pt5/src/app/app.component.ts
index 96bc3fe694..c41599e92a 100644
--- a/aio/content/examples/toh-pt5/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt5/src/app/app.component.ts
@@ -1,21 +1,9 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  // #docregion template
-  template: `
-    <h1>{{title}}</h1>
-    <nav>
-      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `,
-  // #enddocregion template
-  // #docregion styleUrls
-  styleUrls: ['./app.component.css'],
-  // #enddocregion styleUrls
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.1.ts b/aio/content/examples/toh-pt5/src/app/app.module.1.ts
deleted file mode 100644
index e1cda9b620..0000000000
--- a/aio/content/examples/toh-pt5/src/app/app.module.1.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-
-import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroesComponent }     from './heroes.component';
-import { HeroService }         from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule
-  ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent,
-    HeroesComponent
-  ],
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.2.ts b/aio/content/examples/toh-pt5/src/app/app.module.2.ts
deleted file mode 100644
index 00876570f3..0000000000
--- a/aio/content/examples/toh-pt5/src/app/app.module.2.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { RouterModule }   from '@angular/router';
-
-import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroesComponent }     from './heroes.component';
-import { HeroService }         from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    RouterModule.forRoot([
-      {
-        path: 'heroes',
-        component: HeroesComponent
-      }
-    ])
-  ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent,
-    HeroesComponent
-  ],
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
-/*
-// #docregion heroes, routing
-import { RouterModule }   from '@angular/router';
-
-RouterModule.forRoot([
-  {
-    path: 'heroes',
-    component: HeroesComponent
-  }
-])
-// #enddocregion heroes, routing
-*/
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.3.ts b/aio/content/examples/toh-pt5/src/app/app.module.3.ts
deleted file mode 100644
index 306d9958f0..0000000000
--- a/aio/content/examples/toh-pt5/src/app/app.module.3.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { RouterModule }   from '@angular/router';
-
-import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { DashboardComponent }  from './dashboard.component';
-import { HeroesComponent }     from './heroes.component';
-import { HeroService }         from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    RouterModule.forRoot([
-      // #docregion redirect
-      {
-        path: '',
-        redirectTo: '/dashboard',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      // #docregion dashboard
-      {
-        path: 'dashboard',
-        component: DashboardComponent
-      },
-      // #enddocregion dashboard
-      // #docregion hero-detail
-      {
-        path: 'detail/:id',
-        component: HeroDetailComponent
-      },
-      // #enddocregion hero-detail
-      // #docregion heroes, routing
-      {
-        path: 'heroes',
-        component: HeroesComponent
-      }
-      // #enddocregion heroes, routing
-    ])
-  ],
-  declarations: [
-    AppComponent,
-    DashboardComponent,
-    HeroDetailComponent,
-    HeroesComponent
-  ],
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.ts b/aio/content/examples/toh-pt5/src/app/app.module.ts
index b376d69aba..120bf48fcd 100644
--- a/aio/content/examples/toh-pt5/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt5/src/app/app.module.ts
@@ -4,10 +4,12 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
-import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-import { HeroesComponent }      from './heroes.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+import { HeroesComponent }      from './heroes/heroes.component';
 import { HeroService }          from './hero.service';
+import { MessageService }       from './message.service';
+import { MessagesComponent }    from './messages/messages.component';
 
 // #docregion routing-module
 import { AppRoutingModule }     from './app-routing.module';
@@ -23,11 +25,12 @@ import { AppRoutingModule }     from './app-routing.module';
   declarations: [
     AppComponent,
     DashboardComponent,
+    HeroesComponent,
     HeroDetailComponent,
-    HeroesComponent
+    MessagesComponent
   ],
   // #enddocregion dashboard
-  providers: [ HeroService ],
+  providers: [ HeroService, MessageService ],
   bootstrap: [ AppComponent ]
 // #docregion routing-module
 })
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts
deleted file mode 100644
index 3c92b205c8..0000000000
--- a/aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-dashboard',
-  template: '<h3>My Dashboard</h3>'
-})
-export class DashboardComponent { }
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard.component.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.ts
deleted file mode 100644
index 416cf8868e..0000000000
--- a/aio/content/examples/toh-pt5/src/app/dashboard.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docplaster
-// #docregion , imports
-import { Component, OnInit } from '@angular/core';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-// #enddocregion imports
-
-// #docregion metadata
-@Component({
-  selector: 'my-dashboard',
-  templateUrl: './dashboard.component.html',
-  // #enddocregion metadata
-  // #docregion css
-  styleUrls: [ './dashboard.component.css' ]
-  // #enddocregion css
-  // #docregion metadata
-})
-// #enddocregion metadata
-// #docregion class
-export class DashboardComponent implements OnInit {
-
-  heroes: Hero[] = [];
-
-  // #docregion ctor
-  constructor(private heroService: HeroService) { }
-  // #enddocregion ctor
-
-  ngOnInit(): void {
-    this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes.slice(1, 5));
-  }
-}
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard.component.1.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
similarity index 60%
rename from aio/content/examples/toh-pt5/src/app/dashboard.component.1.html
rename to aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
index 0c556b8de0..ddb4fd29f8 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard.component.1.html
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
@@ -1,9 +1,8 @@
-<!-- #docregion -->
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
-  <div *ngFor="let hero of heroes" class="col-1-4">
+  <a *ngFor="let hero of heroes" class="col-1-4">
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>
-  </div>
+  </a>
 </div>
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
similarity index 95%
rename from aio/content/examples/toh-pt6/src/app/dashboard.component.css
rename to aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
index dc7fb7ce06..3822cc56bb 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard.component.css
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* DashboardComponent's private CSS styles */
 [class*='col-'] {
   float: left;
   padding-right: 20px;
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard.component.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
similarity index 63%
rename from aio/content/examples/toh-pt5/src/app/dashboard.component.html
rename to aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
index 49e77c460c..946a4d5fdb 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard.component.html
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
@@ -1,8 +1,8 @@
-<!-- #docregion -->
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <a *ngFor="let hero of heroes" class="col-1-4"
+      routerLink="/detail/{{hero.id}}">
   <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000000..fea6bfb4db
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000000..d4db0c406d
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+  // #enddocregion getHeroes
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
deleted file mode 100644
index 2895161fee..0000000000
--- a/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Imports in comments cause problems when the app is executed
-// (some error about 'traceur' missing). Hence this separate file
-// is solely for containing the transitory state of the imports.
-
-// #docregion added-imports
-// Keep the Input import for now, you'll remove it later:
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Location }                 from '@angular/common';
-
-import { HeroService } from './hero.service';
-// #enddocregion added-imports
-
-// Bogus code below this point. It is only here to make lint happy.
-import { Hero } from './hero';
-
-@Component({})
-export class HeroDetailComponent implements OnInit {
-  @Input() hero: Hero;
-  bogus: ParamMap;
-
-  constructor(
-    private heroService: HeroService,
-    private route: ActivatedRoute,
-    private location: Location
-  ) {}
-
-  ngOnInit() {}
-}
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail.component.html
deleted file mode 100644
index 8f2ff9d90c..0000000000
--- a/aio/content/examples/toh-pt5/src/app/hero-detail.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- #docplaster -->
-<!-- #docregion -->
-<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>
-  <!-- #docregion back-button -->
-  <button (click)="goBack()">Back</button>
-  <!-- #enddocregion back-button -->
-</div>
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
deleted file mode 100644
index 01f3a4c2db..0000000000
--- a/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docplaster
-// #docregion , v2, rxjs-import
-import 'rxjs/add/operator/switchMap';
-// #enddocregion rxjs-import
-import { Component, OnInit }        from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Location }                 from '@angular/common';
-
-import { Hero }         from './hero';
-import { HeroService }  from './hero.service';
-// #docregion metadata
-@Component({
-  selector: 'hero-detail',
-  templateUrl: './hero-detail.component.html',
-  // #enddocregion metadata, v2
-  styleUrls: [ './hero-detail.component.css' ]
-  // #docregion metadata, v2
-})
-// #enddocregion metadata
-// #docregion implement
-export class HeroDetailComponent implements OnInit {
-// #enddocregion implement
-  hero: Hero;
-
-  // #docregion ctor
-  constructor(
-    private heroService: HeroService,
-    private route: ActivatedRoute,
-    private location: Location
-  ) {}
-  // #enddocregion ctor
-
-  // #docregion ngOnInit
-  ngOnInit(): void {
-    this.route.paramMap
-      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
-      .subscribe(hero => this.hero = hero);
-  }
-  // #enddocregion ngOnInit
-
-  // #docregion goBack
-  goBack(): void {
-    this.location.back();
-  }
-// #enddocregion goBack
-}
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
similarity index 87%
rename from aio/content/examples/toh-pt5/src/app/hero-detail.component.css
rename to aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
index ab2437efd8..062544af48 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail.component.css
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* HeroDetailComponent's private CSS styles */
 label {
   display: inline-block;
   width: 3em;
@@ -25,6 +25,6 @@ button:hover {
 }
 button:disabled {
   background-color: #eee;
-  color: #ccc; 
+  color: #ccc;
   cursor: auto;
 }
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..338a747291
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,12 @@
+<div *ngIf="hero">
+  <h2>{{ hero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+  <!-- #docregion back-button -->
+  <button (click)="goBack()">go back</button>
+  <!-- #enddocregion back-button -->
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..637ba05f66
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,49 @@
+// #docplaster
+// #docregion
+import { Component, OnInit, Input } from '@angular/core';
+// #docregion added-imports
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+// #enddocregion added-imports
+import { Hero }         from '../hero';
+// #docregion added-imports
+import { HeroService }  from '../hero.service';
+// #enddocregion added-imports
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: [ './hero-detail.component.css' ]
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+
+  // #docregion ctor
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+  // #enddocregion ctor
+
+  // #docregion ngOnInit
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  // #docregion getHero
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+  // #enddocregion getHero
+  // #enddocregion ngOnInit
+
+  // #docregion goBack
+  goBack(): void {
+    this.location.back();
+  }
+// #enddocregion goBack
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts
index ee5a684762..2bde8cc06a 100644
--- a/aio/content/examples/toh-pt5/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero.service.ts
@@ -1,26 +1,28 @@
-// #docplaster
-// #docregion
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Rx';
+import { of } from 'rxjs/observable/of';
+
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
-import { Injectable } from '@angular/core';
+import { MessageService } from './message.service';
 
 @Injectable()
 export class HeroService {
-  getHeroes(): Promise<Hero[]> {
-    return Promise.resolve(HEROES);
-  }
 
-  getHeroesSlowly(): Promise<Hero[]> {
-    return new Promise(resolve => {
-      // Simulate server latency with 2 second delay
-      setTimeout(() => resolve(this.getHeroes()), 2000);
-    });
+  constructor(private messageService: MessageService) { }
+
+  getHeroes(): Observable<Hero[]> {
+    // Todo: send the message _after_ fetching the heroes
+    this.messageService.add('HeroService: fetched heroes');
+    return of(HEROES);
   }
 
   // #docregion getHero
-  getHero(id: number): Promise<Hero> {
-    return this.getHeroes()
-               .then(heroes => heroes.find(hero => hero.id === id));
+  getHero(id: number): Observable<Hero> {
+    // Todo: send the message _after_ fetching the hero
+    this.messageService.add(`HeroService: fetched hero id=${id}`);
+    return of(HEROES.find(hero => hero.id === id));
   }
   // #enddocregion getHero
 }
diff --git a/aio/content/examples/toh-pt5/src/app/heroes.component.html b/aio/content/examples/toh-pt5/src/app/heroes.component.html
deleted file mode 100644
index db41c4692e..0000000000
--- a/aio/content/examples/toh-pt5/src/app/heroes.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- #docplaster -->
-<!-- #docregion -->
-<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 mini-detail -->
-<div *ngIf="selectedHero">
-  <h2>
-    <!-- #docregion pipe -->
-    {{selectedHero.name | uppercase}} is my hero
-    <!-- #enddocregion pipe -->
-  </h2>
-  <button (click)="gotoDetail()">View Details</button>
-</div>
diff --git a/aio/content/examples/toh-pt5/src/app/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes.component.ts
deleted file mode 100644
index def615e6b9..0000000000
--- a/aio/content/examples/toh-pt5/src/app/heroes.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-
-// #docregion renaming, metadata
-@Component({
-  selector: 'my-heroes',
-  // #enddocregion renaming
-  templateUrl: './heroes.component.html',
-  styleUrls: [ './heroes.component.css' ]
-  // #docregion renaming
-})
-// #enddocregion metadata
-// #docregion class
-export class HeroesComponent implements OnInit {
-  // #enddocregion renaming
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(
-    private router: Router,
-    private heroService: HeroService) { }
-
-  getHeroes(): void {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-  }
-
-  ngOnInit(): void {
-    this.getHeroes();
-  }
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
-
-  // #docregion gotoDetail
-  gotoDetail(): void {
-    this.router.navigate(['/detail', this.selectedHero.id]);
-  }
-  // #enddocregion gotoDetail
-  // #docregion renaming
-}
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..91e0badceb
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -0,0 +1,51 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  position: relative;
+  cursor: pointer;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
+}
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
+.heroes .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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..bd7e454e45
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html
@@ -0,0 +1,10 @@
+<h2>My Heroes</h2>
+<!-- #docregion list -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
+  </li>
+</ul>
+<!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..3a893ba554
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+// #docregion class
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes);
+  }
+}
+// #enddocregion class
diff --git a/aio/content/examples/toh-pt5/src/app/message.service.spec.ts b/aio/content/examples/toh-pt5/src/app/message.service.spec.ts
new file mode 100644
index 0000000000..63ecfd8ff6
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt5/src/app/message.service.ts b/aio/content/examples/toh-pt5/src/app/message.service.ts
new file mode 100644
index 0000000000..9b3a2cac05
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages.length = 0;
+  }
+}
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
new file mode 100644
index 0000000000..d08d9be581
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
new file mode 100644
index 0000000000..1df7dfd989
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts
new file mode 100644
index 0000000000..3c2b2b1537
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts
new file mode 100644
index 0000000000..17c8b2701f
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt5/src/index.html b/aio/content/examples/toh-pt5/src/index.html
index ad300fc244..f5fed0967e 100644
--- a/aio/content/examples/toh-pt5/src/index.html
+++ b/aio/content/examples/toh-pt5/src/index.html
@@ -1,17 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <!-- #docregion head -->
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
   <!-- #docregion base-href -->
-  <head>
-    <base href="/">
-    <!-- #enddocregion base-href -->
-    <title>Angular Tour of Heroes</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <!-- #enddocregion head -->
+  <base href="/">
+  <!-- #enddocregion base-href -->
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt5/src/main.ts b/aio/content/examples/toh-pt5/src/main.ts
index d89536473a..a9ca1caf8c 100644
--- a/aio/content/examples/toh-pt5/src/main.ts
+++ b/aio/content/examples/toh-pt5/src/main.ts
@@ -1,5 +1,3 @@
-// #docregion
-// main entry point
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
diff --git a/aio/content/examples/toh-pt6/aot/index.html b/aio/content/examples/toh-pt6/aot/index.html
deleted file mode 100644
index cb8ecc4461..0000000000
--- a/aio/content/examples/toh-pt6/aot/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <title>Angular Tour of Heroes</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="stylesheet" href="styles.css">
-
-    <script src="shim.min.js"></script>
-    <script src="zone.min.js"></script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-  <script src="dist/build.js"></script>
-</html>
diff --git a/aio/content/examples/toh-pt6/bs-config.aot.json b/aio/content/examples/toh-pt6/bs-config.aot.json
deleted file mode 100644
index e59a7403a0..0000000000
--- a/aio/content/examples/toh-pt6/bs-config.aot.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "open": false,
-  "logLevel": "silent",
-  "port": 8080,
-  "server": {
-    "baseDir": "aot",
-    "routes": {
-      "/node_modules": "node_modules"
-    },
-    "middleware": {
-      "0": null
-    }
-  }
-}
diff --git a/aio/content/examples/toh-pt6/copy-dist-files.js b/aio/content/examples/toh-pt6/copy-dist-files.js
deleted file mode 100644
index 080864e99c..0000000000
--- a/aio/content/examples/toh-pt6/copy-dist-files.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-var fs = require('fs');
-var resources = [
-  'node_modules/core-js/client/shim.min.js',
-  'node_modules/zone.js/dist/zone.min.js',
-  'src/styles.css'
-];
-resources.map(function(f) {
-  var path = f.split('/');
-  var t = 'aot/' + path[path.length-1];
-  fs.createReadStream(f).pipe(fs.createWriteStream(t));
-});
diff --git a/aio/content/examples/toh-pt6/e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
similarity index 70%
rename from aio/content/examples/toh-pt6/e2e-spec.ts
rename to aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
index c7208da7f9..b51be25f84 100644
--- a/aio/content/examples/toh-pt6/e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
@@ -4,8 +4,8 @@ import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protrac
 import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
-const targetHero = { id: 14, name: 'Celeritas' };
+const expectedTitle = `${expectedH1}`;
+const targetHero = { id: 15, name: 'Magneta' };
 const targetHeroDashboardIndex = 3;
 const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
@@ -26,7 +26,8 @@ class Hero {
 
   // Hero from hero list <li> element.
   static async fromLi(li: ElementFinder): Promise<Hero> {
-      let strings = await li.all(by.xpath('span')).getText();
+      let stringsFromA = await li.all(by.css('a')).getText();
+      let strings = stringsFromA[0].split(' ');
       return { id: +strings[0], name: strings[1] };
   }
 
@@ -48,32 +49,31 @@ describe('Tutorial part 6', () => {
   beforeAll(() => browser.get(''));
 
   function getPageElts() {
-    let navElts = element.all(by.css('my-app nav a'));
+    let navElts = element.all(by.css('app-root nav a'));
 
     return {
       navElts: navElts,
 
-      myDashboardHref: navElts.get(0),
-      myDashboard: element(by.css('my-app my-dashboard')),
-      topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
+      appDashboardHref: navElts.get(0),
+      appDashboard: element(by.css('app-root app-dashboard')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
 
-      myHeroesHref: navElts.get(1),
-      myHeroes: element(by.css('my-app my-heroes')),
-      allHeroes: element.all(by.css('my-app my-heroes li')),
-      selectedHero: element(by.css('my-app li.selected')),
-      selectedHeroSubview: element(by.css('my-app my-heroes > div:last-child')),
+      appHeroesHref: navElts.get(1),
+      appHeroes: element(by.css('app-root app-heroes')),
+      allHeroes: element.all(by.css('app-root app-heroes li')),
+      selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')),
 
-      heroDetail: element(by.css('my-app hero-detail > div')),
+      heroDetail: element(by.css('app-root app-hero-detail > div')),
 
       searchBox: element(by.css('#search-box')),
-      searchResults: element.all(by.css('.search-result'))
+      searchResults: element.all(by.css('.search-result li'))
     };
   }
 
   describe('Initial page', () => {
 
     it(`has title '${expectedTitle}'`, () => {
-        expect(browser.getTitle()).toEqual(expectedTitle);
+      expect(browser.getTitle()).toEqual(expectedTitle);
     });
 
     it(`has h1 '${expectedH1}'`, () => {
@@ -88,7 +88,7 @@ describe('Tutorial part 6', () => {
 
     it('has dashboard as the active view', () => {
       let page = getPageElts();
-      expect(page.myDashboard.isPresent()).toBeTruthy();
+      expect(page.appDashboard.isPresent()).toBeTruthy();
     });
 
   });
@@ -107,8 +107,8 @@ describe('Tutorial part 6', () => {
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
     it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
-      element(by.buttonText('Back')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
+      element(by.buttonText('go back')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
       expect(targetHeroElt.getText()).toEqual(targetHero.name);
@@ -119,8 +119,8 @@ describe('Tutorial part 6', () => {
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
     it(`saves and shows ${newHeroName} in Dashboard`, () => {
-      element(by.buttonText('Save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
+      element(by.buttonText('save')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
       expect(targetHeroElt.getText()).toEqual(newHeroName);
@@ -133,40 +133,29 @@ describe('Tutorial part 6', () => {
     beforeAll(() => browser.get(''));
 
     it('can switch to Heroes view', () => {
-      getPageElts().myHeroesHref.click();
+      getPageElts().appHeroesHref.click();
       let page = getPageElts();
-      expect(page.myHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(11, 'number of heroes');
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
 
-    it(`selects and shows ${targetHero.name} as selected in list`, () => {
+    it('can route to hero details', async () => {
       getHeroLiEltById(targetHero.id).click();
-      expect(Hero.fromLi(getPageElts().selectedHero)).toEqual(targetHero);
-    });
-
-    it('shows selected hero subview', () => {
-      let page = getPageElts();
-      let title = page.selectedHeroSubview.element(by.css('h2')).getText();
-      let expectedTitle = `${targetHero.name.toUpperCase()} is my hero`;
-      expect(title).toEqual(expectedTitle);
-    });
-
-    it('can route to hero details', () => {
-      element(by.buttonText('View Details')).click();
 
       let page = getPageElts();
       expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
-      let hero = Hero.fromDetail(page.heroDetail);
-      expect(hero).toEqual(targetHero);
+      let hero = await Hero.fromDetail(page.heroDetail);
+      expect(hero.id).toEqual(targetHero.id);
+      expect(hero.name).toEqual(targetHero.name.toUpperCase());
     });
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
     it(`shows ${newHeroName} in Heroes list`, () => {
-      element(by.buttonText('Save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
-      let expectedHero = {id: targetHero.id, name: newHeroName};
-      expect(Hero.fromLi(getHeroLiEltById(targetHero.id))).toEqual(expectedHero);
+      element(by.buttonText('save')).click();
+      browser.waitForAngular();
+      let expectedText = `${targetHero.id} ${newHeroName}`;
+      expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
     });
 
     it(`deletes ${newHeroName} from Heroes list`, async () => {
@@ -175,12 +164,13 @@ describe('Tutorial part 6', () => {
       li.element(by.buttonText('x')).click();
 
       const page = getPageElts();
-      expect(page.myHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
       const heroesAfter = await toHeroArray(page.allHeroes);
+      // console.log(await Hero.fromLi(page.allHeroes[0]));
       const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
       expect(heroesAfter).toEqual(expectedHeroes);
-      expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
+      // expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
     });
 
     it(`adds back ${targetHero.name}`, async () => {
@@ -189,7 +179,7 @@ describe('Tutorial part 6', () => {
       const numHeroes = heroesBefore.length;
 
       element(by.css('input')).sendKeys(newHeroName);
-      element(by.buttonText('Add')).click();
+      element(by.buttonText('add')).click();
 
       let page = getPageElts();
       let heroesAfter = await toHeroArray(page.allHeroes);
@@ -206,20 +196,21 @@ describe('Tutorial part 6', () => {
 
     beforeAll(() => browser.get(''));
 
-    it(`searches for 'Ce'`, async () => {
-      getPageElts().searchBox.sendKeys('Ce');
+    it(`searches for 'Ma'`, async () => {
+      getPageElts().searchBox.sendKeys('Ma');
+      browser.sleep(1000);
+
+      expect(getPageElts().searchResults.count()).toBe(4);
+    });
+
+    it(`continues search with 'g'`, async () => {
+      getPageElts().searchBox.sendKeys('g');
       browser.sleep(1000);
       expect(getPageElts().searchResults.count()).toBe(2);
     });
 
-    it(`continues search with 'l'`, async () => {
-      getPageElts().searchBox.sendKeys('l');
-      browser.sleep(1000);
-      expect(getPageElts().searchResults.count()).toBe(1);
-    });
-
     it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
-      getPageElts().searchBox.sendKeys('e');
+      getPageElts().searchBox.sendKeys('n');
       browser.sleep(1000);
       let page = getPageElts();
       expect(page.searchResults.count()).toBe(1);
@@ -234,28 +225,33 @@ describe('Tutorial part 6', () => {
 
       let page = getPageElts();
       expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
-      expect(Hero.fromDetail(page.heroDetail)).toEqual(targetHero);
+      let hero2 = await Hero.fromDetail(page.heroDetail);
+      expect(hero2.id).toEqual(targetHero.id);
+      expect(hero2.name).toEqual(targetHero.name.toUpperCase());
     });
   });
 
-  function dashboardSelectTargetHero() {
+  async function dashboardSelectTargetHero() {
     let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
     expect(targetHeroElt.getText()).toEqual(targetHero.name);
     targetHeroElt.click();
-    browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
+    browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
     let page = getPageElts();
     expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
-    let hero = Hero.fromDetail(page.heroDetail);
-    expect(hero).toEqual(targetHero);
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
   }
 
   async function updateHeroNameInDetailView() {
     // Assumes that the current view is the hero details view.
     addToHeroName(nameSuffix);
 
-    let hero = await Hero.fromDetail(getPageElts().heroDetail);
-    expect(hero).toEqual({id: targetHero.id, name: newHeroName});
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newHeroName.toUpperCase());
   }
 
 });
@@ -271,11 +267,16 @@ function expectHeading(hLevel: number, expectedText: string): void {
     expect(hText).toEqual(expectedText, hTag);
 };
 
-function getHeroLiEltById(id: number): ElementFinder {
+function getHeroAEltById(id: number): ElementFinder {
   let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
   return spanForId.element(by.xpath('..'));
 }
 
+function getHeroLiEltById(id: number): ElementFinder {
+  let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+  return spanForId.element(by.xpath('../..'));
+}
+
 async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
   let promisedHeroes = await allHeroes.map(Hero.fromLi);
   // The cast is necessary to get around issuing with the signature of Promise.all()
diff --git a/aio/content/examples/toh-pt6/rollup-config.js b/aio/content/examples/toh-pt6/rollup-config.js
deleted file mode 100644
index 5689edcff4..0000000000
--- a/aio/content/examples/toh-pt6/rollup-config.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import rollup      from 'rollup'
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs    from 'rollup-plugin-commonjs';
-import uglify      from 'rollup-plugin-uglify'
-
-//paths are relative to the execution path
-export default {
-  entry: 'src/main-aot.js',
-  dest: 'aot/dist/build.js', // output a single application bundle
-  sourceMap: true,
-  sourceMapFile: 'aot/dist/build.js.map',
-  format: 'iife',
-  onwarn: function(warning) {
-    // Skip certain warnings
-
-    // should intercept ... but doesn't in some rollup versions
-    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
-
-    // console.warn everything else
-    console.warn( warning.message );
-  },
-  plugins: [
-    nodeResolve({jsnext: true, module: true}),
-    commonjs({
-      include: ['node_modules/rxjs/**']
-    }),
-    uglify()
-  ]
-}
diff --git a/aio/content/examples/toh-pt6/src/app/app-routing.module.ts b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
index bc070f6c31..969e78b276 100644
--- a/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
+++ b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
@@ -1,15 +1,15 @@
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { DashboardComponent }   from './dashboard.component';
-import { HeroesComponent }      from './heroes.component';
-import { HeroDetailComponent }  from './hero-detail.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: 'dashboard',  component: DashboardComponent },
+  { path: 'dashboard', component: DashboardComponent },
   { path: 'detail/:id', component: HeroDetailComponent },
-  { path: 'heroes',     component: HeroesComponent }
+  { path: 'heroes', component: HeroesComponent }
 ];
 
 @NgModule({
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css
index 071e665767..bf741e4575 100644
--- a/aio/content/examples/toh-pt6/src/app/app.component.css
+++ b/aio/content/examples/toh-pt6/src/app/app.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* AppComponent's private CSS styles */
 h1 {
   font-size: 1.2em;
   color: #999;
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.html b/aio/content/examples/toh-pt6/src/app/app.component.html
new file mode 100644
index 0000000000..49c7d171b6
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app.component.html
@@ -0,0 +1,7 @@
+<h1>{{title}}</h1>
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>
+<app-messages></app-messages>
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.ts b/aio/content/examples/toh-pt6/src/app/app.component.ts
index a9fe05a9a8..c41599e92a 100644
--- a/aio/content/examples/toh-pt6/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/app.component.ts
@@ -1,17 +1,8 @@
-// #docplaster
-// #docregion
-import { Component }          from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  template: `
-    <h1>{{title}}</h1>
-    <nav>
-      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `,
+  selector: 'app-root',
+  templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
diff --git a/aio/content/examples/toh-pt6/src/app/app.module.ts b/aio/content/examples/toh-pt6/src/app/app.module.ts
index 58eeb10c54..a5734c5018 100644
--- a/aio/content/examples/toh-pt6/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt6/src/app/app.module.ts
@@ -1,52 +1,56 @@
 // #docplaster
-// #docregion
-// #docregion v1, v2
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
-import { HttpModule }    from '@angular/http';
+// #docregion, v1
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { HttpClientModule }    from '@angular/common/http';
 
-import { AppRoutingModule } from './app-routing.module';
-
-// #enddocregion v1
-// Imports for loading & configuring the in-memory web api
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+// #docregion import-in-mem-stuff
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService }  from './in-memory-data.service';
+// #enddocregion import-in-mem-stuff
+
+import { AppRoutingModule }     from './app-routing.module';
 
-// #docregion v1
 import { AppComponent }         from './app.component';
-import { DashboardComponent }   from './dashboard.component';
-import { HeroesComponent }      from './heroes.component';
-import { HeroDetailComponent }  from './hero-detail.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+// #enddocregion v1
+import { HeroSearchComponent }  from './hero-search/hero-search.component';
+// #docregion v1
 import { HeroService }          from './hero.service';
-// #enddocregion v1, v2
-import { HeroSearchComponent }  from './hero-search.component';
-// #docregion v1, v2
+import { MessageService }       from './message.service';
+import { MessagesComponent }    from './messages/messages.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
-    // #enddocregion v1
-    // #docregion in-mem-web-api
-    InMemoryWebApiModule.forRoot(InMemoryDataService),
-    // #enddocregion in-mem-web-api
-    // #docregion v1
-    AppRoutingModule
+    AppRoutingModule,
+    // #docregion in-mem-web-api-imports
+    HttpClientModule,
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, { dataEncapsulation: false }
+    )
+    // #enddocregion in-mem-web-api-imports
   ],
-  // #docregion search
   declarations: [
     AppComponent,
     DashboardComponent,
-    HeroDetailComponent,
     HeroesComponent,
-  // #enddocregion v1, v2
+    HeroDetailComponent,
+    MessagesComponent,
+    // #enddocregion v1
     HeroSearchComponent
-  // #docregion v1, v2
+    // #docregion v1
   ],
-  // #enddocregion search
-  providers: [ HeroService ],
+  providers: [ HeroService, MessageService ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
+// #enddocregion , v1
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard.component.html
deleted file mode 100644
index db8546ccd2..0000000000
--- a/aio/content/examples/toh-pt6/src/app/dashboard.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!-- #docregion -->
-<h3>Top Heroes</h3>
-<div class="grid grid-pad">
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
-    <div class="module hero">
-      <h4>{{hero.name}}</h4>
-    </div>
-  </a>
-</div>
-<hero-search></hero-search>
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
similarity index 95%
rename from aio/content/examples/toh-pt5/src/app/dashboard.component.css
rename to aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
index dc7fb7ce06..3822cc56bb 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard.component.css
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* DashboardComponent's private CSS styles */
 [class*='col-'] {
   float: left;
   padding-right: 20px;
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000000..b70c0c7d6e
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,11 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <a *ngFor="let hero of heroes" class="col-1-4"
+      routerLink="/detail/{{hero.id}}">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </a>
+</div>
+
+<app-hero-search></app-hero-search>
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000000..fea6bfb4db
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard.component.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts
similarity index 56%
rename from aio/content/examples/toh-pt6/src/app/dashboard.component.ts
rename to aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts
index 9960aa77d4..b2904a2c08 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts
@@ -1,22 +1,24 @@
-// #docregion , search
+// #docregion
 import { Component, OnInit } from '@angular/core';
-
-import { Hero }        from './hero';
-import { HeroService } from './hero.service';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
 
 @Component({
-  selector: 'my-dashboard',
+  selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
 })
-// #enddocregion search
 export class DashboardComponent implements OnInit {
   heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) { }
 
-  ngOnInit(): void {
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
     this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes.slice(1, 5));
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
   }
 }
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail.component.html
deleted file mode 100644
index 32fe6d4391..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-detail.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- #docregion -->
-<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>
-  <button (click)="goBack()">Back</button>
-  <!-- #docregion save -->
-  <button (click)="save()">Save</button>
-  <!-- #enddocregion save -->
-</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
deleted file mode 100644
index e0222aded7..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// #docregion
-import 'rxjs/add/operator/switchMap';
-import { Component, OnInit }        from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Location }                 from '@angular/common';
-
-import { Hero }        from './hero';
-import { HeroService } from './hero.service';
-
-@Component({
-  selector: 'hero-detail',
-  templateUrl: './hero-detail.component.html',
-  styleUrls: [ './hero-detail.component.css' ]
-})
-export class HeroDetailComponent implements OnInit {
-  hero: Hero;
-
-  constructor(
-    private heroService: HeroService,
-    private route: ActivatedRoute,
-    private location: Location
-  ) {}
-
-  ngOnInit(): void {
-    this.route.paramMap
-      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
-      .subscribe(hero => this.hero = hero);
-  }
-
-  // #docregion save
-  save(): void {
-    this.heroService.update(this.hero)
-      .then(() => this.goBack());
-  }
-  // #enddocregion save
-
-  goBack(): void {
-    this.location.back();
-  }
-}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
similarity index 87%
rename from aio/content/examples/toh-pt6/src/app/hero-detail.component.css
rename to aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
index ab2437efd8..062544af48 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-detail.component.css
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
@@ -1,4 +1,4 @@
-/* #docregion */
+/* HeroDetailComponent's private CSS styles */
 label {
   display: inline-block;
   width: 3em;
@@ -25,6 +25,6 @@ button:hover {
 }
 button:disabled {
   background-color: #eee;
-  color: #ccc; 
+  color: #ccc;
   cursor: auto;
 }
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..a57d510897
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,13 @@
+<div *ngIf="hero">
+  <h2>{{ hero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+  <button (click)="goBack()">go back</button>
+  <!-- #docregion save -->
+  <button (click)="save()">save</button>
+  <!-- #enddocregion save -->
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..d1259eebf0
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { Hero }         from '../hero';
+import { HeroService }  from '../hero.service';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: [ './hero-detail.component.css' ]
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+ // #docregion save
+ save(): void {
+    this.heroService.updateHero(this.hero)
+      .subscribe(() => this.goBack());
+  }
+// #enddocregion save
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search.component.css
deleted file mode 100644
index 9bf8d13457..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-search.component.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* #docregion */
-.search-result{
-  border-bottom: 1px solid gray;
-  border-left: 1px solid gray;
-  border-right: 1px solid gray;
-  width:195px;
-  height: 16px;
-  padding: 5px;
-  background-color: white;
-  cursor: pointer;
-}
-
-.search-result:hover {
-  color: #eee;
-  background-color: #607D8B;
-}
-
-#search-box{
-  width: 200px;
-  height: 20px;
-}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search.component.html
deleted file mode 100644
index 08c0560c5b..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-search.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- #docregion -->
-<div id="search-component">
-  <h4>Hero Search</h4>
-  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
-  <div>
-    <div *ngFor="let hero of heroes | async"
-         (click)="gotoDetail(hero)" class="search-result" >
-      {{hero.name}}
-    </div>
-  </div>
-</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search.component.ts
deleted file mode 100644
index 8b2d32f06b..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-search.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Router }            from '@angular/router';
-
-// #docregion rxjs-imports
-import { Observable }        from 'rxjs/Observable';
-import { Subject }           from 'rxjs/Subject';
-
-// Observable class extensions
-import 'rxjs/add/observable/of';
-
-// Observable operators
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-// #enddocregion rxjs-imports
-
-import { HeroSearchService } from './hero-search.service';
-import { Hero } from './hero';
-
-@Component({
-  selector: 'hero-search',
-  templateUrl: './hero-search.component.html',
-  styleUrls: [ './hero-search.component.css' ],
-  providers: [HeroSearchService]
-})
-export class HeroSearchComponent implements OnInit {
-  // #docregion search
-  heroes: Observable<Hero[]>;
-  // #enddocregion search
-  // #docregion searchTerms
-  private searchTerms = new Subject<string>();
-  // #enddocregion searchTerms
-
-  constructor(
-    private heroSearchService: HeroSearchService,
-    private router: Router) {}
-  // #docregion searchTerms
-
-  // Push a search term into the observable stream.
-  search(term: string): void {
-    this.searchTerms.next(term);
-  }
-  // #enddocregion searchTerms
-  // #docregion search
-
-  ngOnInit(): void {
-    this.heroes = this.searchTerms
-      .debounceTime(300)        // wait 300ms after each keystroke before considering the term
-      .distinctUntilChanged()   // ignore if next search term is same as previous
-      .switchMap(term => term   // switch to new observable each time the term changes
-        // return the http search observable
-        ? this.heroSearchService.search(term)
-        // or the observable of empty heroes if there was no search term
-        : Observable.of<Hero[]>([]))
-      .catch(error => {
-        // TODO: add real error handling
-        console.log(error);
-        return Observable.of<Hero[]>([]);
-      });
-  }
-  // #enddocregion search
-
-  gotoDetail(hero: Hero): void {
-    let link = ['/detail', hero.id];
-    this.router.navigate(link);
-  }
-}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search.service.ts b/aio/content/examples/toh-pt6/src/app/hero-search.service.ts
deleted file mode 100644
index 52bf95a158..0000000000
--- a/aio/content/examples/toh-pt6/src/app/hero-search.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Http }       from '@angular/http';
-
-import { Observable }     from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-
-import { Hero }           from './hero';
-
-@Injectable()
-export class HeroSearchService {
-
-  constructor(private http: Http) {}
-
-  search(term: string): Observable<Hero[]> {
-    return this.http
-               .get(`api/heroes/?name=${term}`)
-               .map(response => response.json().data as Hero[]);
-  }
-}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
new file mode 100644
index 0000000000..0f2c8cdd10
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
@@ -0,0 +1,39 @@
+/* HeroSearch private styles */
+.search-result li {
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  height: 16px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.search-result li:hover {
+  background-color: #607D8B;
+}
+
+.search-result li a {
+  color: #888;
+  display: block;
+  text-decoration: none;
+}
+
+.search-result li a:hover {
+  color: white;
+}
+.search-result li a:active {
+  color: white;
+}
+#search-box {
+  width: 200px;
+  height: 20px;
+}
+
+
+ul.search-result {
+  margin-top: 0;
+  padding-left: 0;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
new file mode 100644
index 0000000000..102851a3bc
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
@@ -0,0 +1,17 @@
+<div id="search-component">
+  <h4>Hero Search</h4>
+
+  <!-- #docregion input -->
+  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+  <!-- #enddocregion input -->
+
+  <ul class="search-result">
+    <!-- #docregion async -->
+    <li *ngFor="let hero of heroes$ | async" >
+    <!-- #enddocregion async -->
+      <a routerLink="/detail/{{hero.id}}">
+        {{hero.name}}
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts
new file mode 100644
index 0000000000..901bb7f2ab
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroSearchComponent } from './hero-search.component';
+
+describe('HeroSearchComponent', () => {
+  let component: HeroSearchComponent;
+  let fixture: ComponentFixture<HeroSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
new file mode 100644
index 0000000000..b218e9e30c
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
@@ -0,0 +1,54 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+// #docregion rxjs-imports
+import { Observable } from 'rxjs/Observable';
+import { Subject }    from 'rxjs/Subject';
+import { of }         from 'rxjs/observable/of';
+
+import {
+   debounceTime, distinctUntilChanged, switchMap
+ } from 'rxjs/operators';
+// #enddocregion rxjs-imports
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-hero-search',
+  templateUrl: './hero-search.component.html',
+  styleUrls: [ './hero-search.component.css' ]
+})
+export class HeroSearchComponent implements OnInit {
+  // #docregion heroes-stream
+  heroes$: Observable<Hero[]>;
+  // #enddocregion heroes-stream
+  // #docregion searchTerms
+  private searchTerms = new Subject<string>();
+  // #enddocregion searchTerms
+
+  constructor(private heroService: HeroService) {}
+  // #docregion searchTerms
+
+  // Push a search term into the observable stream.
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
+  // #enddocregion searchTerms
+
+  ngOnInit(): void {
+    // #docregion search
+    this.heroes$ = this.searchTerms.pipe(
+      // wait 300ms after each keystroke before considering the term
+      debounceTime(300),
+
+      // ignore new term if same as previous term
+      distinctUntilChanged(),
+
+      // switch to new search observable each time the term changes
+      switchMap((term: string) => this.heroService.searchHeroes(term)),
+    );
+    // #enddocregion search
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero.service.ts b/aio/content/examples/toh-pt6/src/app/hero.service.ts
index 29fe5c2e0e..b1d2c222da 100644
--- a/aio/content/examples/toh-pt6/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero.service.ts
@@ -1,87 +1,158 @@
 // #docplaster
-// #docregion , imports
-import { Injectable }    from '@angular/core';
-import { Headers, Http } from '@angular/http';
+// #docregion
+import { Injectable } from '@angular/core';
+// #docregion import-httpclient
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+// #enddocregion import-httpclient
 
-// #docregion rxjs
-import 'rxjs/add/operator/toPromise';
-// #enddocregion rxjs
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+// #docregion import-rxjs-operators
+import { catchError, map, tap } from 'rxjs/operators';
+// #enddocregion import-rxjs-operators
 
 import { Hero } from './hero';
-// #enddocregion imports
+import { MessageService } from './message.service';
+
+// #docregion http-options
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+// #enddocregion http-options
 
 @Injectable()
 export class HeroService {
 
-  // #docregion update
-  private headers = new Headers({'Content-Type': 'application/json'});
-  // #enddocregion update
-  // #docregion getHeroes
+  // #docregion heroesUrl
   private heroesUrl = 'api/heroes';  // URL to web api
+  // #enddocregion heroesUrl
 
-  constructor(private http: Http) { }
+  // #docregion ctor
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService) { }
+  // #enddocregion ctor
 
-  getHeroes(): Promise<Hero[]> {
-    return this.http.get(this.heroesUrl)
-    // #docregion to-promise
-               .toPromise()
-    // #enddocregion to-promise
-    // #docregion to-data
-               .then(response => response.json().data as Hero[])
-    // #enddocregion to-data
-    // #docregion catch
-               .catch(this.handleError);
-    // #enddocregion catch
+  // #docregion getHeroes, getHeroes-1
+  /** GET heroes from the server */
+  // #docregion getHeroes-2
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get<Hero[]>(this.heroesUrl)
+  // #enddocregion getHeroes-1
+      .pipe(
+        // #enddocregion getHeroes-2
+        tap(heroes => this.log(`fetched heroes`)),
+        // #docregion getHeroes-2
+        catchError(this.handleError('getHeroes', []))
+      );
+  // #docregion getHeroes-1
   }
+  // #enddocregion getHeroes, getHeroes-1, getHeroes-2
 
-  // #enddocregion getHeroes
+  // #docregion getHeroNo404
+  /** GET hero by id. Return `undefined` when id not found */
+  getHeroNo404<Data>(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/?id=${id}`;
+    return this.http.get<Hero[]>(url)
+      .pipe(
+        map(heroes => heroes[0]), // returns a {0|1} element array
+        // #enddocregion getHeroNo404
+        tap(h => {
+          const outcome = h ? `fetched` : `did not find`;
+          this.log(`${outcome} hero id=${id}`);
+        }),
+        catchError(this.handleError<Hero>(`getHero id=${id}`))
+        // #docregion getHeroNo404
+      );
+  }
+  // #enddocregion getHeroNo404
 
   // #docregion getHero
-  getHero(id: number): Promise<Hero> {
+  /** GET hero by id. Will 404 if id not found */
+  getHero(id: number): Observable<Hero> {
     const url = `${this.heroesUrl}/${id}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => response.json().data as Hero)
-      .catch(this.handleError);
+    return this.http.get<Hero>(url).pipe(
+      tap(_ => this.log(`fetched hero id=${id}`)),
+      catchError(this.handleError<Hero>(`getHero id=${id}`))
+    );
   }
   // #enddocregion getHero
 
-  // #docregion delete
-  delete(id: number): Promise<void> {
+  // #docregion searchHeroes
+  /* GET heroes whose name contains search term */
+  searchHeroes(term: string): Observable<Hero[]> {
+    if (!term.trim()) {
+      // if not search term, return empty hero array.
+      return of([]);
+    }
+    return this.http.get<Hero[]>(`api/heroes/?name=${term}`).pipe(
+      tap(_ => this.log(`found heroes matching "${term}"`)),
+      catchError(this.handleError<Hero[]>('searchHeroes', []))
+    );
+  }
+  // #enddocregion searchHeroes
+
+  //////// Save methods //////////
+
+  // #docregion addHero
+  /** POST: add a new hero to the server */
+  addHero (hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+  // #enddocregion addHero
+
+  // #docregion deleteHero
+  /** DELETE: delete the hero from the server */
+  deleteHero (hero: Hero | number): Observable<Hero> {
+    const id = typeof hero === 'number' ? hero : hero.id;
     const url = `${this.heroesUrl}/${id}`;
-    return this.http.delete(url, {headers: this.headers})
-      .toPromise()
-      .then(() => null)
-      .catch(this.handleError);
-  }
-  // #enddocregion delete
 
-  // #docregion create
-  create(name: string): Promise<Hero> {
-    return this.http
-      .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
-      .toPromise()
-      .then(res => res.json().data as Hero)
-      .catch(this.handleError);
+    return this.http.delete<Hero>(url, httpOptions).pipe(
+      tap(_ => this.log(`deleted hero id=${id}`)),
+      catchError(this.handleError<Hero>('deleteHero'))
+    );
   }
-  // #enddocregion create
-  // #docregion update
+  // #enddocregion deleteHero
 
-  update(hero: Hero): Promise<Hero> {
-    const url = `${this.heroesUrl}/${hero.id}`;
-    return this.http
-      .put(url, JSON.stringify(hero), {headers: this.headers})
-      .toPromise()
-      .then(() => hero)
-      .catch(this.handleError);
+  // #docregion updateHero
+  /** PUT: update the hero on the server */
+  updateHero (hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+      tap(_ => this.log(`updated hero id=${hero.id}`)),
+      catchError(this.handleError<any>('updateHero'))
+    );
   }
-  // #enddocregion update
+  // #enddocregion updateHero
 
-  // #docregion getHeroes, handleError
-  private handleError(error: any): Promise<any> {
-    console.error('An error occurred', error); // for demo purposes only
-    return Promise.reject(error.message || error);
+  // #docregion handleError
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T> (operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message}`);
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
   }
-  // #enddocregion getHeroes, handleError
+  // #enddocregion handleError
+
+  // #docregion log
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add('HeroService: ' + message);
+  }
+  // #enddocregion log
 }
-
diff --git a/aio/content/examples/toh-pt6/src/app/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes.component.html
deleted file mode 100644
index 392d241d52..0000000000
--- a/aio/content/examples/toh-pt6/src/app/heroes.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- #docregion -->
-<h2>My Heroes</h2>
-<!-- #docregion add -->
-<div>
-  <label>Hero name:</label> <input #heroName />
-  <button (click)="add(heroName.value); heroName.value=''">
-    Add
-  </button>
-</div>
-<!-- #enddocregion add -->
-<ul class="heroes">
-  <!-- #docregion li-element -->
-  <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
-      [class.selected]="hero === selectedHero">
-    <span class="badge">{{hero.id}}</span>
-    <span>{{hero.name}}</span>
-    <!-- #docregion delete -->
-    <button class="delete"
-      (click)="delete(hero); $event.stopPropagation()">x</button>
-    <!-- #enddocregion delete -->
-  </li>
-  <!-- #enddocregion li-element -->
-</ul>
-<div *ngIf="selectedHero">
-  <h2>
-    {{selectedHero.name | uppercase}} is my hero
-  </h2>
-  <button (click)="gotoDetail()">View Details</button>
-</div>
diff --git a/aio/content/examples/toh-pt6/src/app/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes.component.ts
deleted file mode 100644
index 6350b803c4..0000000000
--- a/aio/content/examples/toh-pt6/src/app/heroes.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Router }            from '@angular/router';
-
-import { Hero }                from './hero';
-import { HeroService }         from './hero.service';
-
-@Component({
-  selector: 'my-heroes',
-  templateUrl: './heroes.component.html',
-  styleUrls: [ './heroes.component.css' ]
-})
-export class HeroesComponent implements OnInit {
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(
-    private heroService: HeroService,
-    private router: Router) { }
-
-  getHeroes(): void {
-    this.heroService
-        .getHeroes()
-        .then(heroes => this.heroes = heroes);
-  }
-
-  // #docregion add
-  add(name: string): void {
-    name = name.trim();
-    if (!name) { return; }
-    this.heroService.create(name)
-      .then(hero => {
-        this.heroes.push(hero);
-        this.selectedHero = null;
-      });
-  }
-  // #enddocregion add
-
-  // #docregion delete
-  delete(hero: Hero): void {
-    this.heroService
-        .delete(hero.id)
-        .then(() => {
-          this.heroes = this.heroes.filter(h => h !== hero);
-          if (this.selectedHero === hero) { this.selectedHero = null; }
-        });
-  }
-  // #enddocregion delete
-
-  ngOnInit(): void {
-    this.getHeroes();
-  }
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
-
-  gotoDetail(): void {
-    this.router.navigate(['/detail', this.selectedHero.id]);
-  }
-}
diff --git a/aio/content/examples/toh-pt6/src/app/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
similarity index 75%
rename from aio/content/examples/toh-pt6/src/app/heroes.component.css
rename to aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index d2c958a911..62634648ad 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -1,8 +1,4 @@
-/* #docregion */
-.selected {
-  background-color: #CFD8DC !important;
-  color: white;
-}
+/* HeroesComponent's private CSS styles */
 .heroes {
   margin: 0 0 2em 0;
   list-style-type: none;
@@ -10,28 +6,33 @@
   width: 15em;
 }
 .heroes li {
-  cursor: pointer;
   position: relative;
-  left: 0;
+  cursor: pointer;
   background-color: #EEE;
   margin: .5em;
   padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
+
 .heroes li:hover {
   color: #607D8B;
   background-color: #DDD;
   left: .1em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
-  color: white;
-}
-.heroes .text {
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
   position: relative;
-  top: -3px;
+  display: block;
+  width: 250px;
 }
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
@@ -43,26 +44,33 @@
   left: -1px;
   top: -4px;
   height: 1.8em;
+  min-width: 16px;
+  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-button {
-  font-family: Arial;
+
+/* #docregion additions */
+.button {
   background-color: #eee;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
   cursor: hand;
+  font-family: Arial;
 }
+
 button:hover {
   background-color: #cfd8dc;
 }
-/* #docregion additions */
+
 button.delete {
-  float:right;
-  margin-top: 2px;
-  margin-right: .8em;
+  position: relative;
+  left: 194px;
+  top: -32px;
   background-color: gray !important;
-  color:white;
+  color: white;
 }
+/* #enddocregion additions */
+
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..e674889f6d
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
@@ -0,0 +1,27 @@
+<h2>My Heroes</h2>
+
+<!-- #docregion add -->
+<div>
+  <label>Hero name:
+    <input #heroName />
+  </label>
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button (click)="add(heroName.value); heroName.value=''">
+    add
+  </button>
+</div>
+<!-- #enddocregion add -->
+
+<!-- #docregion list -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
+    <!-- #docregion delete -->
+    <button class="delete" title="delete hero"
+    (click)="delete(hero)">x</button>
+    <!-- #enddocregion delete -->
+  </li>
+</ul>
+<!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000000..9c3b1c4d9f
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..7cdeca088a
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes);
+  }
+
+  // #docregion add
+  add(name: string): void {
+    name = name.trim();
+    if (!name) { return; }
+    this.heroService.addHero({ name } as Hero)
+      .subscribe(hero => {
+        this.heroes.push(hero);
+      });
+  }
+  // #enddocregion add
+
+  // #docregion delete
+  delete(hero: Hero): void {
+    this.heroes = this.heroes.filter(h => h !== hero);
+    this.heroService.deleteHero(hero).subscribe();
+  }
+  // #enddocregion delete
+
+}
diff --git a/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts b/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts
index 88c6d72931..005545c19a 100644
--- a/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts
+++ b/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts
@@ -1,9 +1,9 @@
 // #docregion , init
 import { InMemoryDbService } from 'angular-in-memory-web-api';
+
 export class InMemoryDataService implements InMemoryDbService {
   createDb() {
     const heroes = [
-      { id: 0,  name: 'Zero' },
       { id: 11, name: 'Mr. Nice' },
       { id: 12, name: 'Narco' },
       { id: 13, name: 'Bombasto' },
diff --git a/aio/content/examples/toh-pt6/src/app/message.service.spec.ts b/aio/content/examples/toh-pt6/src/app/message.service.spec.ts
new file mode 100644
index 0000000000..63ecfd8ff6
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt6/src/app/message.service.ts b/aio/content/examples/toh-pt6/src/app/message.service.ts
new file mode 100644
index 0000000000..9b3a2cac05
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages.length = 0;
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
new file mode 100644
index 0000000000..d08d9be581
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
new file mode 100644
index 0000000000..1df7dfd989
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts
new file mode 100644
index 0000000000..3c2b2b1537
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts
new file mode 100644
index 0000000000..17c8b2701f
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt6/src/app/mock-heroes.ts b/aio/content/examples/toh-pt6/src/app/mock-heroes.ts
new file mode 100644
index 0000000000..1771a7103b
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/mock-heroes.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
diff --git a/aio/content/examples/toh-pt6/src/index.html b/aio/content/examples/toh-pt6/src/index.html
index 8d270fad4d..1c4106381f 100644
--- a/aio/content/examples/toh-pt6/src/index.html
+++ b/aio/content/examples/toh-pt6/src/index.html
@@ -1,13 +1,14 @@
-<!-- #docregion -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <base href="/">
-    <title>Angular Tour of Heroes</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
 
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
diff --git a/aio/content/examples/toh-pt6/src/main-aot.ts b/aio/content/examples/toh-pt6/src/main-aot.ts
deleted file mode 100644
index bd2ca604a3..0000000000
--- a/aio/content/examples/toh-pt6/src/main-aot.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowser }    from '@angular/platform-browser';
-
-import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
-
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/aio/content/examples/toh-pt6/src/tsconfig.1.json b/aio/content/examples/toh-pt6/src/tsconfig.1.json
deleted file mode 100644
index fb3d43db90..0000000000
--- a/aio/content/examples/toh-pt6/src/tsconfig.1.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  }
-}
\ No newline at end of file
diff --git a/aio/content/examples/toh-pt6/tsconfig-aot.json b/aio/content/examples/toh-pt6/tsconfig-aot.json
deleted file mode 100644
index 2a88388860..0000000000
--- a/aio/content/examples/toh-pt6/tsconfig-aot.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "./node_modules/@types/"
-    ]
-  },
-
-  "files": [
-    "src/app/app.module.ts",
-    "src/main-aot.ts"
-  ],
-
-  "angularCompilerOptions": {
-    "genDir": "aot",
-    "skipMetadataEmit" : true
-  }
-}
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 9c5f58c1d1..31741ccb4d 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1188,7 +1188,7 @@ Adding an `ngClass` property binding to `currentClasses` sets the element's clas
 
 <div class="l-sub-section">
 
-It's up to you to call `setCurrentClassess()`, both initially and when the dependent properties change.
+It's up to you to call `setCurrentClasses()`, both initially and when the dependent properties change.
 
 </div>
 
@@ -1212,7 +1212,7 @@ Try binding `ngStyle` to a key:value control object.
 Each key of the object is a style name; its value is whatever is appropriate for that style.
 
 Consider a `setCurrentStyles` component method that sets a component property, `currentStyles`
-with an object that defines three styles, based on the state of three other component propertes:
+with an object that defines three styles, based on the state of three other component properties:
 
 <code-example path="template-syntax/src/app/app.component.ts" region="setStyles" title="src/app/app.component.ts" linenums="false">
 </code-example>
@@ -1410,7 +1410,7 @@ The `nullHero` will never be displayed.
 <div class="l-sub-section">
 
 See also the
-[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")
+[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)")
 described below.
 
 </div>
@@ -1472,7 +1472,7 @@ The `NgForOf` directive iterates over the `heroes` array returned by the parent
 and sets `hero` to the current item from the array during each iteration.
 
 You reference the `hero` input variable within the `NgForOf` host element
-(and within its descendents) to access the hero's properties.
+(and within its descendants) to access the hero's properties.
 Here it is referenced first in an interpolation
 and then passed in a binding to the `hero` property of the `<hero-detail>` component.
 
@@ -1658,64 +1658,100 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
 
 {@a inputs-outputs}
 
-## Input and output properties ( <span class="syntax">@Input</span> and <span class="syntax">@Output</span> )
+## Input and Output properties
 
-So far, you've focused mainly on binding to component members within template expressions and statements
-that appear on the *right side of the binding declaration*.
-A member in that position is a data binding **source**.
+An _Input_ property is a _settable_ property annotated with an `@Input` decorator.
+Values flow _into_ the property when it is data bound with a [property binding](#property-binding)
 
-This section concentrates on binding to **targets**, which are directive
-properties on the *left side of the binding declaration*.
-These directive properties must be declared as **inputs** or **outputs**.
+An _Output_ property is an _observable_ property annotated with an `@Output` decorator.
+The property almost always returns an Angular [`EventEmitter`](api/core/EventEmitter).
+Values flow _out_ of the component as events bound with an [event binding](#event-binding).
+
+You can only bind to _another_ component or directive through its _Input_ and _Output_ properties.
 
 <div class="alert is-important">
 
-Remember: All **components** are **directives**.
+Remember that all **components** are **directives**.
 
+The following discussion refers to _components_ for brevity and 
+because this topic is mostly a concern for component authors. 
 </div>
 
-<div class="l-sub-section">
+<h3 class="no-toc">Discussion</h3>
 
-Note the important distinction between a data binding **target** and a data binding **source**.
-
-The *target* of a binding is to the *left* of the `=`.
-The *source* is on the *right* of the `=`.
-
-The *target* of a binding is the property or event inside the binding punctuation: `[]`, `()` or `[()]`.
-The *source* is either inside quotes (`" "`) or within an interpolation (`{{}}`).
-
-Every member of a **source** directive is automatically available for binding.
-You don't have to do anything special to access a directive member in a template expression or statement.
-
-You have *limited* access to members of a **target** directive.
-You can only bind to properties that are explicitly identified as *inputs* and *outputs*.
-
-</div>
-
-In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent`
-and are referenced within quoted syntax to the _right_ of the equals&nbsp;(`=`).
+You are usually binding a template to its _own component class_.
+In such binding expressions, the component's property or method is to the _right_ of the (`=`).
 
 <code-example path="template-syntax/src/app/app.component.html" region="io-1" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-They are *neither inputs nor outputs* of the component. They are **sources** for their bindings.
-The targets are the native `<img>` and `<button>` elements.
+The `iconUrl` and `onSave` are members of the `AppComponent` class.
+They are _not_ decorated with `@Input()` or `@Output`.
+Angular does not object.
 
-Now look at a another snippet in which the `HeroDetailComponent`
-is the **target** of a binding on the _left_ of the equals&nbsp;(`=`).
+**You can always bind to a public property of a component in its own template.**
+It doesn't have to be an _Input_ or _Output_ property
+
+A component's class and template are closely coupled.
+They are both parts of the same thing.
+Together they _are_ the component.
+Exchanges between a component class and its template are internal implementation details.
+
+### Binding to a different component
+
+You can also bind to a property of a _different_ component.
+In such bindings, the _other_ component's property is to the _left_ of the (`=`).
+
+In the following example, the `AppComponent` template binds `AppComponent` class members to properties of the `HeroDetailComponent` whose selector is `'app-hero-detail'`.
 
 <code-example path="template-syntax/src/app/app.component.html" region="io-2" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
-`HeroDetailComponent.hero` is inside brackets; it is the target of a property binding.
-`HeroDetailComponent.deleteRequest` is inside parentheses; it is the target of an event binding.
+The Angular compiler _may_ reject these bindings with errors like this one:
 
-### Declaring input and output properties
+<code-example language="sh" class="code-shell">
+Uncaught Error: Template parse errors:
+Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'
+</code-example>
 
-Target properties must be explicitly marked as inputs or outputs.
+You know that `HeroDetailComponent` has `hero` and `deleteRequest` properties.
+But the Angular compiler refuses to recognize them.
 
-In the `HeroDetailComponent`, such properties are marked as input or output properties using decorators.
+**The Angular compiler won't bind to properties of a different component
+unless they are Input or Output properties**.
+
+There's a good reason for this rule.
+
+It's OK for a component to bind to its _own_ properties.
+The component author is in complete control of those bindings.
+
+But other components shouldn't have that kind of unrestricted access.
+You'd have a hard time supporting your component if anyone could bind to any of its properties.
+Outside components should only be able to bind to the component's public binding API.
+
+Angular asks you to be _explicit_ about that API.
+It's up to _you_ to decide which properties are available for binding by
+external components.
+
+#### TypeScript _public_ doesn't matter
+
+You can't use the TypeScript _public_ and _private_ access modifiers to
+shape the component's public binding API.
+
+<div class="alert is-important">
+
+All data bound properties must be TypeScript _public_ properties.
+Angular never binds to a TypeScript _private_ property.
+
+</div>
+
+Angular requires some other way to identify properties that _outside_ components are allowed to bind to.
+That _other way_ is the `@Input()` and `@Output()` decorators.
+
+### Declaring Input and Output properties
+
+In the sample for this guide, the bindings to `HeroDetailComponent` do not fail
+because the data bound properties are annotated with `@Input()` and `@Output()` decorators.
 
 <code-example path="template-syntax/src/app/hero-detail.component.ts" region="input-output-1" title="src/app/hero-detail.component.ts" linenums="false">
 </code-example>
@@ -1728,9 +1764,6 @@ of the directive metadata, as in this example:
 <code-example path="template-syntax/src/app/hero-detail.component.ts" region="input-output-2" title="src/app/hero-detail.component.ts" linenums="false">
 </code-example>
 
-You can specify an input/output property either with a decorator or in a metadata array.
-Don't do both!
-
 </div>
 
 ### Input or output?
@@ -1939,7 +1972,7 @@ For example, after you use [*ngIf](guide/template-syntax#ngIf) to check that `he
 When the Angular compiler turns your template into TypeScript code,
 it prevents TypeScript from reporting that `hero.name` might be null or undefined.
 
-Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)"),
+Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)"),
 the **non-null assertion operator** does not guard against null or undefined.
 Rather it tells the TypeScript type checker to suspend strict null checks for a specific property expression.
 
diff --git a/aio/content/images/guide/toh/mini-hero-detail.png b/aio/content/images/guide/toh/mini-hero-detail.png
deleted file mode 100644
index 57634227c7..0000000000
Binary files a/aio/content/images/guide/toh/mini-hero-detail.png and /dev/null differ
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index f0a8ba6b13..df7203a0e4 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -82,35 +82,40 @@
           "title": "1. Introduction",
           "tooltip": "Part 1: Introduction to the Tour of Heroes tutorial"
         },
+        {
+          "url": "tutorial/toh-pt0",
+          "title": "2. The Application Shell",
+          "tooltip": "Part 2: Creating the application shell"
+        },
         {
           "url": "tutorial/toh-pt1",
-          "title": "2. The Hero Editor",
-          "tooltip": "Part 2: Build a simple hero editor"
+          "title": "3. The Hero Editor",
+          "tooltip": "Part 3: Build a simple hero editor"
         },
         {
           "url": "tutorial/toh-pt2",
-          "title": "3. Master/Detail",
-          "tooltip": "Part 3: Build a master/detail page with a list of heroes."
+          "title": "4. Displaying a List",
+          "tooltip": "Part 4: Build a master/detail page with a list of heroes."
         },
         {
           "url": "tutorial/toh-pt3",
-          "title": "4. Multiple Components",
-          "tooltip": "Part 4: Refactor the master/detail view into separate components."
+          "title": "5. Master/Detail Components",
+          "tooltip": "Part 5: Refactor the master/detail view into separate components."
         },
         {
           "url": "tutorial/toh-pt4",
-          "title": "5. Services",
-          "tooltip": "Part 5: Create a reusable service to manage hero data."
+          "title": "6. Services",
+          "tooltip": "Part 6: Create a reusable service to manage hero data."
         },
         {
           "url": "tutorial/toh-pt5",
-          "title": "6. Routing",
-          "tooltip": "Part 6: Add the Angular router and navigate among the views."
+          "title": "7. Routing",
+          "tooltip": "Part 7: Add the Angular router and navigate among the views."
         },
         {
           "url": "tutorial/toh-pt6",
-          "title": "7. HTTP",
-          "tooltip": "Part 7: Use HTTP to retrieve and save hero data."
+          "title": "8. HTTP",
+          "tooltip": "Part 8: Use HTTP to retrieve and save hero data."
         }
       ]
     },
diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md
index b5f4f89c69..5e82584693 100644
--- a/aio/content/tutorial/index.md
+++ b/aio/content/tutorial/index.md
@@ -1,30 +1,27 @@
+<h1 class="no-toc">Tutorial: Tour of Heroes</h1>
 
-# Tutorial: Tour of Heroes
+The _Tour of Heroes_ tutorial covers the fundamentals of Angular.  
+In this tutorial you will build an app that helps a staffing agency manage its stable of heroes.
 
-The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.
+This basic app has many of the features you'd expect to find in a data-driven application.
+It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.
 
-The Tour of Heroes app covers the core fundamentals of Angular. You'll build a basic app that
-has many of the features you'd expect to find in a full-blown, data-driven app: acquiring and displaying
-a list of heroes, editing a selected hero's detail, and navigating among different
-views of heroic data.
+By the end of the tutorial you will be able to do the following:
 
-You'll use built-in directives to show and hide elements and display lists of hero data.
-You'll create components to display hero details and show an array of heroes.
-You'll use one-way data binding for read-only data. You'll add editable fields to update a model
-with two-way data binding. You'll bind component methods to user events, like keystrokes and clicks.
-You'll enable users to select a hero from a master list and edit that hero in the details view. You'll
-format data with pipes. You'll create a shared service to assemble the heroes.
-And you'll use routing to navigate among different views and their components.
-<!-- CF: Should this be a bullet list? -->
-
-You'll learn enough core Angular to get started and gain confidence that
-Angular can do whatever you need it to do.
-You'll cover a lot of ground at an introductory level, and you'll find many links
-to pages with greater depth.
-
-When you're done with this tutorial, the app will look like this <live-example name="toh-pt6"></live-example>.
+* Use built-in Angular directives to show and hide elements and display lists of hero data.
+* Create Angular components to display hero details and show an array of heroes.
+* Use one-way data binding for read-only data.
+* Add editable fields to update a model with two-way data binding.
+* Bind component methods to user events, like keystrokes and clicks.
+* Enable users to select a hero from a master list and edit that hero in the details view. 
+* Format data with pipes.
+* Create a shared service to assemble the heroes.
+* Use routing to navigate among different views and their components.
 
+You'll learn enough Angular to get started and gain confidence that
+Angular can do whatever you need it to do. 
 
+After completing all tutorial steps, the final app will look like this <live-example name="toh-pt6"></live-example>.
 
 
 ## What you'll build
@@ -32,26 +29,20 @@ When you're done with this tutorial, the app will look like this <live-example n
 Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
 view and the most heroic heroes:
 
-
 <figure>
   <img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
 </figure>
 
-
-
 You can click the two links above the dashboard ("Dashboard" and "Heroes")
 to navigate between this Dashboard view and a Heroes view.
 
 If you click the dashboard hero "Magneta," the router opens a "Hero Details" view
 where you can change the hero's name.
 
-
 <figure>
   <img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
 </figure>
 
-
-
 Clicking the "Back" button returns you to the Dashboard.
 Links at the top take you to either of the main views.
 If you click "Heroes," the app displays the "Heroes" master list view.
@@ -61,8 +52,6 @@ If you click "Heroes," the app displays the "Heroes" master list view.
   <img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
 </figure>
 
-
-
 When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
 
 You can click the "View Details" button to drill into the
@@ -70,29 +59,12 @@ editable details of the selected hero.
 
 The following diagram captures all of the navigation options.
 
-
 <figure>
   <img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
 </figure>
 
-
-
 Here's the app in action:
 
-
 <figure>
   <img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">
 </figure>
-
-
-
-
-## Next step
-
-You'll build the Tour of Heroes app, step by step.
-Each step is motivated with a requirement that you've likely
-met in many applications. Everything has a reason.
-
-Along the way, you'll become familiar with many of the core fundamentals of Angular.
-
-Start now by building a simple [hero editor](tutorial/toh-pt1 "The Hero Editor").
diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md
new file mode 100644
index 0000000000..fcbd9626cf
--- /dev/null
+++ b/aio/content/tutorial/toh-pt0.md
@@ -0,0 +1,117 @@
+# The Application Shell
+
+## Install the Angular CLI
+
+ Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
+
+<code-example language="sh" class="code-shell">
+  npm install -g @angular/cli
+</code-example>  
+
+## Create a new application
+
+Create a new project named `angular-tour-of-heroes` with this CLI command.
+
+<code-example language="sh" class="code-shell">
+  ng new angular-tour-of-heroes
+</code-example> 
+
+The Angular CLI generated a new project with a default application and supporting files. 
+
+## Serve the application
+
+Go to the project directory and launch the application.
+
+<code-example language="sh" class="code-shell">
+  cd angular-tour-of-heroes
+  ng serve --open
+</code-example>
+ 
+<div class="l-sub-section">
+
+The `ng serve` command builds the app, starts the development server,
+watches the source files, and rebuilds the app as you make changes to those files.
+
+The `--open` flag  opens a browser to `http://localhost:4200/`.
+
+</div>
+
+You should see the app running in your browser.
+
+## Angular components
+
+The page you see is the _application shell_.
+The shell is controlled by an Angular **component** named `AppComponent`.
+
+_Components_ are the fundamental building blocks of Angular applications.
+They display data on the screen, listen for user input, and take action based on that input.
+
+## Change the application title
+
+Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
+
+You'll find the implementation of the shell `AppComponent` distributed over three files:
+
+1. `app.component.ts`&mdash; the component class code, written in TypeScript. 
+1. `app.component.html`&mdash; the component template, written in HTML.
+1. `app.component.css`&mdash; the component's private CSS styles.
+
+
+Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
+
+<code-example path="toh-pt0/src/app/app.component.ts" region="set-title" title="app.component.ts (class title property)" linenums="false">
+</code-example>
+
+Open the component template file (`app.component.ts`) and
+delete the default template generated by the Angular CLI.
+Replace it with the following line of HTML.
+
+<code-example path="toh-pt0/src/app/app.component.html" 
+  title="app.component.html (template)" linenums="false">
+</code-example>
+
+The double curly braces are Angular's *interpolation binding* syntax. 
+This interpolation binding presents the component's `title` property value 
+inside the HTML header tag.
+
+The browser refreshes and displays the new application title.
+
+{@a app-wide-styles}
+
+## Add application styles
+
+Most apps strive for a consistent look across the application.
+The CLI generated an empty `styles.css` for this purpose.
+Put your application-wide styles there.
+
+Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
+
+<code-example path="toh-pt0/src/styles.1.css" title="src/styles.css (excerpt)">
+</code-example>
+
+## Final code review
+
+The source code for this tutorial and the complete _Tour of Heroes_ global styles 
+are available in the <live-example></live-example>. 
+
+Here are the code files discussed on this page. 
+
+<code-tabs>
+
+  <code-pane title="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.html" path="toh-pt0/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/styles.css (excerpt)" 
+    path="toh-pt0/src/styles.1.css">
+  </code-pane>
+</code-tabs>
+
+## Summary
+
+* You created the initial application structure using the Angular CLI.
+* You learned that Angular components display data.
+* You used the double curly braces of interpolation to display the app title. 
diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md
index c6f54bf3f9..a5b0d76536 100644
--- a/aio/content/tutorial/toh-pt1.md
+++ b/aio/content/tutorial/toh-pt1.md
@@ -1,292 +1,256 @@
-@title
-The Hero Editor
+# The Hero Editor
 
-@intro
-Build a simple hero editor.
+The application now has a basic title.
+Next you will create a new component to display hero information
+and place that component in the application shell.
 
-@description
-
-
-## Setup to develop locally
-Follow the [setup](guide/setup) instructions for creating a new project
-named <code>angular-tour-of-heroes</code>.
-
-The file structure should look like this:
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-When you're done with this page, the app should look like this <live-example></live-example>.
-
-
-{@a keep-transpiling}
-
-
-## Keep the app transpiling and running
-Enter the following command in the terminal window:
+## Create the heroes component
 
+Using the Angular CLI, generate a new component named `heroes`.
 
 <code-example language="sh" class="code-shell">
-  npm start
+  ng generate component heroes
+</code-example>
 
+The CLI creates a new folder, `src/app/heroes/` and generates
+the three files of the  `HeroesComponent`.
+
+The `HeroesComponent` class file is as follows:
+
+<code-example 
+  path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" 
+  title="app/heroes/heroes.component.ts (initial version)" linenums="false">
+</code-example>
+
+You always import the `Component` symbol from the Angular core library
+and annotate the component class with `@Component`.
+
+`@Component` is a decorator function that specifies the Angular metadata for the component.
+
+The CLI generated three metadata properties:
+
+1. `selector`&mdash; the components CSS element selector
+1. `templateUrl`&mdash; the location of the component's template file.
+1. `styleUrls`&mdash; the location of the component's private CSS styles.
+
+{@a selector}
+
+The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
+`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.
+
+The `ngOnInit` is a [lifecycle hook](guide/lifecycle-hooks#oninit) 
+Angular calls `ngOnInit` shortly after creating a component.
+It's a good place to put initialization logic.
+
+Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.
+
+### Add a _hero_ property
+
+Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" title="heroes.component.ts (hero property)" linenums="false">
+</code-example>
+
+### Show the hero
+
+Open the `heroes.component.html` template file.
+Delete the default text generated by the Angular CLI and 
+replace it with a data binding to the new `hero` property.  
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" title="heroes.component.html" region="show-hero-1" linenums="false">
+</code-example>
+
+## Show the _HeroesComponent_ view
+
+To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.
+
+Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. 
+So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.
+
+<code-example path="toh-pt1/src/app/app.component.html" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+Assuming that the CLI `ng serve` command is still running,
+the browser should refresh and display both the application title and the hero name.
+
+## Create a Hero class
+
+A real hero is more than a name.
+
+Create a `Hero` class in its own file in the `src/app` folder.
+Give it `id` and `name` properties.
+
+<code-example path="toh-pt1/src/app/hero.ts"  title="src/app/hero.ts" linenums="false">
 </code-example>
 
 
+Return to the `HeroesComponent` class and import the `Hero` class.
 
-This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
+Refactor the component's `hero` property to be of type `Hero`.
+Initialize it with an `id` of `1` and the name `Windstorm`.
 
-You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
-
-
-
-## Show the hero
-Add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property
-for a hero named "Windstorm."
-
-
-<code-example path="toh-pt1/app/app.component.1.ts" region="app-component-1" title="app.component.ts (AppComponent class)" linenums="false">
+The revised `HeroesComponent` class file should look like this:
 
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" linenums="false"
+  title= "src/app/heroes/heroes.component.ts">
 </code-example>
 
+The page no longer displays properly because you changed the hero from a string to an object.
 
+## Show the hero object
 
-Now update the template in the `@Component` decorator with data bindings to these new properties.
-
-
-<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero" title="app.component.ts (@Component)" linenums="false">
+Update the binding in the template to announce the hero's name
+and show both `id` and `name` in a details layout like this:
 
+<code-example 
+  path="toh-pt1/src/app/heroes/heroes.component.1.html"
+  region="show-hero-2" 
+  title="heroes.component.html (HeroesComponent's template)" linenums="false">
 </code-example>
 
+The browser refreshes and display's the hero's information.
 
+## Format with the _UppercasePipe_
 
-The browser refreshes and displays the title and hero name.
-
-The double curly braces are Angular's *interpolation binding* syntax.
-These interpolation bindings present the component's `title` and `hero` property values,
-as strings, inside the HTML header tags.
-
-
-<div class="l-sub-section">
-
-
-
-Read more about interpolation in the [Displaying Data](guide/displaying-data) page.
-
-
-</div>
-
-
-
-### Hero object
-
-The hero needs more properties.
-Convert the `hero` from a literal string to a class.
-
-Create a `Hero` class with `id` and `name` properties.
-Add these properties near the top of the `app.component.ts` file, just below the import statement.
-
-
-<code-example path="toh-pt1/src/app/app.component.ts" region="hero-class-1" title="src/app/app.component.ts (Hero class)" linenums="false">
-
+Modify the `hero.name` binding like this.
+<code-example
+  path="toh-pt1/src/app/heroes/heroes.component.html"
+  region="pipe">
 </code-example>
 
+The browser refreshes and now the hero's name is displayed in capital letters.
 
+The word `uppercase` in the interpolation binding, 
+right after the pipe operator ( | ),
+activates the built-in `UppercasePipe`.
 
-In the `AppComponent` class, refactor the component's `hero` property to be of type `Hero`,
-then initialize it with an `id` of `1` and the name `Windstorm`.
+[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
+Angular ships with several built-in pipes and you can create your own.
 
-
-<code-example path="toh-pt1/src/app/app.component.ts" region="hero-property-1" title="src/app/app.component.ts (hero property)" linenums="false">
-
-</code-example>
-
-
-
-Because you changed the hero from a string to an object,
-update the binding in the template to refer to the hero's `name` property.
-
-
-<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero-2" title="src/app/app.component.ts">
-
-</code-example>
-
-
-
-The browser refreshes and continues to display the hero's name.
-
-### Adding HTML with multi-line template strings
-
-To show all of the hero's properties,
-add a `<div>` for the hero's `id` property and another `<div>` for the hero's `name`.
-To keep the template readable, place each `<div>` on its own line.
-
-The backticks around the component template let you put the `<h1>`, `<h2>`, and `<div>` elements on their own lines,
-thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For more information, see
-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" target="_blank" title="template literal">Template literals</a>.
-
-
-
-<code-example path="toh-pt1/app/app.component.1.ts" region="multi-line-strings" title="app.component.ts (AppComponent's template)" linenums="false">
-
-</code-example>
-
-
-
-
-## Edit the hero name
+## Edit the hero
 
 Users should be able to edit the hero name in an `<input>` textbox.
+
 The textbox should both _display_ the hero's `name` property
 and _update_ that property as the user types.
+That means data flow from the component class _out to the screen_ and
+from the screen _back to the class_.
 
-You need a two-way binding between the `<input>` form element and the `hero.name` property.
+To automate that data flow, setup a two-way data binding between the `<input>` form element and the `hero.name` property.
 
 ### Two-way binding
 
-Refactor the hero name in the template so it looks like this:
+Refactor the details area in the `HeroesComponent` template so it looks like this:
 
-<code-example path="toh-pt1/app/app.component.1.ts" region="name-input" title="src/app/app.component.ts" linenums="false">
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" title="src/app/heroes/heroes.component.html (HeroesComponent's template)" linenums="false">
 
 </code-example>
 
+**[(ngModel)]** is Angular's two-way data binding syntax. 
 
+Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.
 
-`[(ngModel)]` is the Angular syntax to bind the `hero.name` property
-to the textbox.
-Data flows _in both directions:_ from the property to the textbox,
-and from the textbox back to the property.
+### The missing _FormsModule_
 
-Unfortunately, immediately after this change, the application breaks.
-If you looked in the browser console, you'd see Angular complaining that
-"`ngModel` ... isn't a known property of `input`."
+Notice that the app stopped working when you added `[(ngModel)]`.
 
-Although `NgModel` is a valid Angular directive, it isn't available by default.
-It belongs to the optional `FormsModule`.
-You must opt-in to using that module.
-
-### Import the _FormsModule_
-
-Open the `app.module.ts` file and import the `FormsModule` symbol from the `@angular/forms` library.
-Then add the `FormsModule` to the `@NgModule` metadata's `imports` array, which contains the list
-of external modules that the app uses.
-
-The updated `AppModule` looks like this:
-
-<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule import)">
+To see the error, open the browser development tools and look in the console
+for a message like
 
+<code-example language="sh" class="code-shell">
+Template parse errors:
+Can't bind to 'ngModel' since it isn't a known property of 'input'.
 </code-example>
 
+Although `ngModel` is a valid Angular directive, it isn't available by default. 
+
+It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
+
+## _AppModule_
+
+Angular needs to know how the pieces of your application fit together
+and what other files and libraries the app requires.
+This information is called _metadata_
+
+Some of the metadata is in the `@Component` decorators that you added to your component classes.
+Other critical metadata is in [`@NgModule`](guide/ngmodule) decorators.
+
+The most important `@NgModule`decorator annotates the top-level **AppModule** class.
+
+The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
+This is where you _opt-in_ to the `FormsModule`.
+
+### Import _FormsModule_
+
+Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. 
+
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule symbol import)"
+ region="formsmodule-js-import">
+</code-example>
+
+Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts ( @NgModule imports)"
+region="ng-imports">
+</code-example>
+
+When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
+
+### Declare _HeroesComponent_ 
+
+Every component must be declared in _exactly one_ [NgModule](guide/ngmodule).
+
+_You_ didn't declare the `HeroesComponent`.
+So why did the application work?
+
+It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.
+
+Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.
+<code-example path="toh-pt1/src/app/app.module.ts" region="heroes-import" >
+</code-example>
+
+The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+<code-example path="toh-pt1/src/app/app.module.ts" region="declarations">
+</code-example>
+
+Note that `AppModule`  declares both application components, `AppComponent` and `HeroesComponent`.
 
 
-<div class="l-sub-section">
+## Final code review
 
+Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.
 
+<code-tabs>
 
-Read more about `FormsModule` and `ngModel` in the
-[Two-way data binding with ngModel](guide/forms#ngModel) section of the
-[Forms](guide/forms) guide and the
-[Two-way binding with NgModel](guide/template-syntax#ngModel) section of the
-[Template Syntax](guide/template-syntax) guide.
+  <code-pane title="src/app/heroes/heroes.component.ts" path="toh-pt1/src/app/heroes/heroes.component.ts">
+  </code-pane>
 
+  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt1/src/app/heroes/heroes.component.html">
+  </code-pane>
 
-</div>
+  <code-pane title="src/app/app.module.ts" 
+  path="toh-pt1/src/app/app.module.ts">
+  </code-pane>
 
+  <code-pane title="src/app/app.component.ts" path="toh-pt1/src/app/app.component.ts">
+  </code-pane>
 
+  <code-pane title="src/app/app.component.html" path="toh-pt1/src/app/app.component.html">
+  </code-pane>
 
-When the browser refreshes, the app should work again.
-You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
-
+  <code-pane title="src/app/hero.ts" 
+  path="toh-pt1/src/app/hero.ts">
+  </code-pane>
 
+</code-tabs>
 
 ## Summary
 
-Take stock of what you've built.
-
-* The Tour of Heroes app uses the double curly braces of interpolation (a type of one-way data binding)
-to display the app title and properties of a `Hero` object.
-* You wrote a multi-line template using ES2015's template literals to make the template readable.
-* You added a two-way data binding to the `<input>` element
-using the built-in `ngModel` directive. This binding both displays the hero's name and allows users to change it.
-* The `ngModel` directive propagates changes to every other binding of the `hero.name`.
-
-Your app should look like this <live-example></live-example>.
-
-Here's the complete `app.component.ts` as it stands now:
-
-
-<code-example path="toh-pt1/src/app/app.component.ts" title="src/app/app.component.ts">
-
-</code-example>
-
-
-
-
-## Next step
-In the [next tutorial page](tutorial/toh-pt2  "Master/Detail"), you'll build on the Tour of Heroes app to display a list of heroes.
-You'll also allow the user to select heroes and display their details.
-You'll learn more about how to retrieve lists and bind them to the template.
+* You used the CLI to create a second `HeroesComponent`.
+* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. 
+* You applied the `UppercasePipe` to format the name.
+* You used two-way data binding with the `ngModel` directive.
+* You learned about the `AppModule`.
+* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. 
+* You learned the importance of declaring components in the `AppModule`
+and appreciated that the CLI declared it for you.
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index fb476b2d8f..c8c54bd590 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -1,466 +1,256 @@
-@title
-Master/Detail
-
-@intro
-Build a master/detail page with a list of heroes.
-
-@description
-
+# Display a Heroes List
 
 In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
 allow users to select a hero and display the hero's details.
 
-When you're done with this page, the app should look like this <live-example></live-example>.
 
+## Create mock heroes
 
+You'll need some heroes to display.
 
-## Where you left off
-Before you continue with this page of the Tour of Heroes,
-verify that you have the following structure after [The Hero Editor](tutorial/toh-pt1) page.
-If your structure doesn't match, go back to that page to figure out what you missed.
+Eventually you'll get them from a remote data server.
+For now, you'll create some _mock heroes_ and pretend they came from the server.
 
+Create a file called `mock-heroes.ts` in the `src/app/` folder.
+Define a `HEROES` constant as an array of ten heroes and export it.
+The file should look like this.
 
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-## Keep the app transpiling and running
-Enter the following command in the terminal window:
-
-
-<code-example language="sh" class="code-shell">
-  npm start
-
+<code-example path="toh-pt2/src/app/mock-heroes.ts" linenums="false"
+title="src/app/heroes/mock-heroes.ts">
 </code-example>
 
-
-
-This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
-
-You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
-
-
-
 ## Displaying heroes
-To display a list of heroes, you'll add heroes to the view's template.
 
-### Create heroes
-Create an array of ten heroes.
+You're about to display the list of heroes at the top of the `HeroesComponent`.
 
+Open the `HeroesComponent` class file and import the mock `HEROES`.
 
-<code-example path="toh-pt2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
-
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" title="src/app/heroes/heroes.component.ts (import HEROES)">
 </code-example>
 
+Add a `heroes` property to the class that exposes these heroes for binding.
 
-
-The `HEROES` array is of type `Hero`, the class defined in the previous page.
-Eventually this app will fetch the list of heroes from a web service, but for now
-you can display mock heroes.
-
-### Expose heroes
-Create a public property in `AppComponent` that exposes the heroes for binding.
-
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
-
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="heroes">
 </code-example>
 
+### List heroes with _*ngFor_
 
+Open the `HeroesComponent` template file and make the following changes:
 
-The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
+* Add an `<h2>` at the top, 
+* Below it add an HTML unordered list (`<ul>`)
+* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
 
+Make it look like this:
 
-<div class="l-sub-section">
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" title="heroes.component.html (heroes template)" linenums="false">
+</code-example>
 
+Now change the `<li>` to this:
 
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
+</code-example>
 
-The hero data is separated from the class implementation
-because ultimately the hero names will come from a data service.
+The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive. 
+It repeats the host element for each element in a list.
 
+In this example
+
+* `<li>` is the host element
+* `heroes` is the list from the `HeroesComponent` class.
+* `hero` holds the current hero object for each iteration through the list. 
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
 
 </div>
 
+After the browser refreshes, the list of heroes appears.
 
-
-### Display hero names in a template
-To display the hero names in an unordered list,
-insert the following chunk of HTML below the title and above the hero details.
-
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
-
-</code-example>
-
-
-
-Now you can fill the template with hero names.
-
-### List heroes with ngFor
-
-The goal is to bind the array of heroes in the component to the template, iterate over them,
-and display them individually.
-
-Modify the `<li>` tag by adding the built-in directive `*ngFor`.
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-The (`*`) prefix to `ngFor` is a critical part of this syntax.
-It indicates that the `<li>` element and its children
-constitute a master template.
-
-The `ngFor` directive iterates over the component's `heroes` array
-and renders an instance of this template for each hero in that array.
-
-The `let hero` part of the expression identifies `hero` as the  template input variable,
-which holds the current hero item for each iteration.
-You can reference this variable within the template to access the current hero's properties.
-
-Read more about `ngFor` and template input variables in the
-[Showing an array property with *ngFor](guide/displaying-data#ngFor) section of the
-[Displaying Data](guide/displaying-data) page and the
-[ngFor](guide/template-syntax#ngFor) section of the
-[Template Syntax](guide/template-syntax) page.
-
-
-</div>
-
-
-
-Within the `<li>` tags, add content
-that uses the `hero` template variable to display the hero's properties.
-
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
-
-</code-example>
-
-
-
-When the browser refreshes, a list of heroes appears.
+{@a styles}
 
 ### Style the heroes
-Users should get a visual cue of which hero they are hovering over and which hero is selected.
 
-To add styles to your component, set the `styles` property on the `@Component` decorator
-to the following CSS classes:
+The heroes list should be attractive and should respond visually when users 
+hover over and select a hero from the list.
 
+In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
+That stylesheet didn't include styles for this list of heroes.
 
-<code-example path="toh-pt2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
+You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
 
+You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
+and the CSS &mdash;together in one place.
+
+This approach makes it easier to re-use the component somewhere else
+and deliver the component's intended appearance even if the global styles are different.
+
+You define private styles either inline in the `@Component.styles` array or
+as stylesheet file(s) identified in the `@Component.styleUrls` array.
+
+When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
+and pointed to it in `@Component.styleUrls` like this.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
+ title="src/app/heroes/heroes.component.ts (@Component)">
 </code-example>
 
+Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
+You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
 
+<div class="alert is-important">
 
-Remember to use the backtick notation for multi-line strings.
+Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
+The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
 
-Adding these styles makes the file much longer. In a later page you'll move the styles to a separate file.
+</div>
 
-When you assign styles to a component, they are scoped to that specific component.
-These styles apply only to the `AppComponent` and don't affect the outer HTML.
+## Master/Detail
 
-The template for displaying heroes should look like this:
+When the user clicks a hero in the **master** list, 
+the component should display the selected hero's **details** at the bottom of the page.
 
+In this section, you'll listen for the hero item click event
+and update the hero detail.
 
+### Add a click event binding
 
-<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
-
-</code-example>
-
-
-
-
-## Selecting a hero
-The app now displays a list of heroes as well as a single hero in the details view. But
-the list and the details view are not connected.
-When users select a hero from the list, the selected hero should appear in the details view.
-This UI pattern is known as "master/detail."
-In this case, the _master_ is the heroes list and the _detail_ is the selected hero.
-
-Next you'll connect the master to the detail through a `selectedHero` component property,
-which is bound to a click event.
-
-### Handle click events
 Add a click event binding to the `<li>` like this:
 
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
-
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" title="heroes.component.html (template excerpt)" linenums="false">
 </code-example>
 
+This is an example of Angular's [event binding](guide/template-syntax#event-binding) syntax.
 
+The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
+When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
 
-The parentheses identify the `<li>` element's  `click` event as the target.
-The `onSelect(hero)` expression calls the  `AppComponent` method, `onSelect()`,
-passing the template input variable `hero`, as an argument.
-That's the same `hero` variable you defined previously in the `ngFor` directive.
+`onSelect()` is a `HeroesComponent` method that you're about to write.
+Angular calls it with the `hero` object displayed in the clicked `<li>`,
+the same `hero` defined previously in the `*ngFor` expression.
 
-<div class="l-sub-section">
+### Add the click event handler
 
+Rename the component's `hero` property to `selectedHero` but don't assign it.
+There is no _selected hero_ when the application starts.
 
+Add the following `onSelect()` method, which assigns the clicked hero from the template
+to the component's `selectedHero`.
 
-Learn more about event binding at the
-[User Input](guide/user-input) page and the
-[Event binding](guide/template-syntax#event-binding) section of the
-[Template Syntax](guide/template-syntax) page.
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" title="src/app/heroes/heroes.component.ts (onSelect)" linenums="false">
+</code-example>
 
+### Update the details template
+
+The template still refers to the component's old `hero` property which no longer exists. 
+Rename `hero` to `selectedHero`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" title="heroes.component.html (selected hero details)" linenums="false">
+</code-example>
+
+### Hide empty details with _*ngIf_
+
+After the browser refreshes, the application is broken.
+
+Open the browser developer tools and look in the console for an error message like this:
+
+<code-example language="sh" class="code-shell">
+  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
+</code-example>
+
+Now click one of the list items.
+The app seems to be working again.
+The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
+
+#### What happened?
+
+When the app starts, the `selectedHero` is `undefined` _by design_.
+
+Binding expressions in the template that refer to properties of `selectedHero` &mdash; expressions like `{{selectedHero.name}}` &mdash; _must fail_ because there is no selected hero.
+
+#### The fix
+
+The component should only display the selected hero details if the `selectedHero` exists.
+
+Wrap the hero detail HTML in a `<div>`.
+Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
 
 </div>
 
-
-
-### Add a click handler to expose the selected hero
-You no longer need the `hero` property because you're no longer displaying a single hero; you're displaying a list of heroes.
-But the user will be able to select one of the heroes by clicking on it.
-So replace the `hero` property with this simple `selectedHero` property:
-
-
-<code-example path="toh-pt2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
-
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" title="src/app/heroes/heroes.component.html (*ngIf)" linenums="false">
 </code-example>
 
+After the browser refreshes, the list of names reappears.
+The details area is blank.
+Click a hero and its details appear.
 
+#### Why it works
 
-The hero names should all be unselected before the user picks a hero, so
-you won't initialize the `selectedHero` as you did with `hero`.
-
-Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
-
-<code-example path="toh-pt2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
-
-</code-example>
-
-
-
-The template still refers to the old `hero` property.
-Bind to the new `selectedHero` property instead as follows:
-
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
-
-</code-example>
-
-
-
-### Hide the empty detail with ngIf
-
-When the app loads, `selectedHero` is undefined.
-The selected hero is initialized when the user clicks a hero's name.
-Angular can't display properties of the undefined `selectedHero` and throws the following error,
-visible in the browser's console:
-
-
-<code-example format="nocode">
-  EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
-
-</code-example>
-
-
-
-Although `selectedHero.name` is displayed in the template,
-you must keep the hero detail out of the DOM until there is a selected hero.
-
-Wrap the HTML hero detail content of the template with a `<div>`.
-Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
-
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
-
-</code-example>
-
-
-
-<div class="alert is-critical">
-
-
-
-Don't forget the asterisk (`*`) in front of `ngIf`.
-
-
-</div>
-
-
-
-The app no longer fails and the list of names displays again in the browser.
-
-
-When there is no selected hero, the `ngIf` directive removes the hero detail HTML from the DOM.
-There are no hero detail elements or bindings to worry about.
-
-When the user picks a hero, `selectedHero` becomes defined and
-`ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
-
-
-<div class="l-sub-section">
-
-
-
-Read more about `ngIf` and `ngFor` in the
-[Structural Directives](guide/structural-directives) page and the
-[Built-in directives](guide/template-syntax#directives) section of the
-[Template Syntax](guide/template-syntax) page.
-
-
-
-</div>
-
+When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to worry about.
 
+When the user picks a hero, `selectedHero` has a value and
+`ngIf` puts the hero detail into the DOM.
 
 ### Style the selected hero
 
-While the selected hero details appear below the list, it's difficult to identify the selected hero within the list itself.
-
-In the `styles` metadata that you added above, there is a custom CSS class named `selected`.
-To make the selected hero more visible, you'll apply this `selected` class to the `<li>` when the user clicks on a hero name.
-For example, when the user clicks "Magneta", it should render with a distinctive but subtle background color
-like this:
+It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
 
+If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
 
 <figure>
+
   <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
+
 </figure>
 
+That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
+You just have to apply the `.selected` class to the `<li>` when the user clicks it.
 
+The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally. 
+Just add `[class.some-css-class]="some-condition"` to the element you want to style.
 
-In the template, add the following `[class.selected]` binding to  the `<li>`:
+Add the following `[class.selected]` binding to  the `<li>` in the `HeroesComponent` template:
 
-<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" title="heroes.component.html (toggle the 'selected' CSS class)" linenums="false">
+</code-example>
+
+When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
+
+The finished `<li>` looks like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" title="heroes.component.html (list item hero)" linenums="false">
 
 </code-example>
 
+{@a final-code-review}
 
+## Final code review
 
-When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
-When the expression is `false`, Angular removes the `selected` class.
+Your app should look like this <live-example></live-example>. 
 
+Here are the code files discussed on this page, including the `HeroesComponent` styles.
 
+<code-tabs>
+  <code-pane title="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
+  </code-pane>
 
-<div class="l-sub-section">
-
-
-
-Read more about the `[class]` binding in the [Template Syntax](guide/template-syntax#ngClass "Template syntax: NgClass") guide.
-
-
-</div>
-
-
-
-The final version of the `<li>` looks like this:
-
-<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
-
-</code-example>
-
-
-
-After clicking "Magneta", the list should look like this:
-
-
-<figure>
-  <img src='generated/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app">
-</figure>
-
-
-
-Here's the complete `app.component.ts` as of now:
-
-
-<code-example path="toh-pt2/src/app/app.component.ts" title="src/app/app.component.ts">
-
-</code-example>
-
-
+  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt2/src/app/heroes/heroes.component.html">
+  </code-pane>
 
+  <code-pane title="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
 
 ## Summary
 
-Here's what you achieved in this page:
-
-* The Tour of Heroes app displays a list of selectable heroes.
-* You added the ability to select a hero and show the hero's details.
-* You learned how to use the built-in directives `ngIf` and `ngFor` in a component's template.
-
-Your app should look like this <live-example></live-example>.
-
-## Next step
-You've expanded the Tour of Heroes app, but it's far from complete.
-An app shouldn't be one monolithic component.
-In the [next page](tutorial/toh-pt3 "Multiple Components"), you'll split the app into subcomponents and make them work together.
+* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
+* The user can select a hero and see that hero's details.
+* You used `*ngFor` to display a list.
+* You used `*ngIf` to conditionally include or exclude a block of HTML.
+* You can toggle a CSS style class with a `class` binding.
diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md
index 0efc4a440e..f517177536 100644
--- a/aio/content/tutorial/toh-pt3.md
+++ b/aio/content/tutorial/toh-pt3.md
@@ -1,467 +1,157 @@
-@title
-Multiple Components
+# Master/Detail Components
 
-@intro
-Refactor the master/detail view into separate components.
+At the moment, the `HeroesComponent` displays both the list of heroes and the selected hero's details. 
 
-@description
+Keeping all features in one component as the application grows will not be maintainable.
+You'll want to split up large components into smaller sub-components, each focused on a specific task or workflow.
 
+In this page, you'll take the first step in that direction by moving the hero details into a separate, reusable `HeroDetailsComponent`.
 
-The `AppComponent` is doing _everything_ at the moment.
-In the beginning, it showed details of a single hero.
-Then it became a master/detail form with both a list of heroes and the hero detail.
-Soon there will be new requirements and capabilities.
-You can't keep piling features on top of features in one component; that's not maintainable.
+The `HeroesComponent` will only present the list of heroes.
+The `HeroDetailsComponent` will present details of a selected hero.
 
-You'll need to break it up into sub-components, each focused on a specific task or workflow.
-Eventually, the `AppComponent` could become a simple shell that hosts those sub-components.
+## Make the _HeroDetailComponent_
 
-In this page, you'll take the first step in that direction by carving out the hero details into a separate, reusable component.
-When you're done, the app should look like this <live-example></live-example>.
+Use the Angular CLI to generate a new component named `hero-detail`.
 
+<code-example language="sh" class="code-shell">
+  ng generate component hero-detail
+</code-example>
 
+The command scaffolds the `HeroDetailComponent` files and declares the component in `AppModule`.
 
-## Where you left off
-Before getting started on this page, verify that you have the following structure from earlier in the Tour of Heroes.
-If not, go back to the previous pages.
+### Write the template
 
+Cut the HTML for the hero detail from the bottom of the `HeroesComponent` template and paste it over the generated boilerplate in the `HeroDetailComponent` template.
 
-<div class='filetree'>
+The pasted HTML refers to a `selectedHero`.
+The new `HeroDetailComponent` can present _any_ hero, not just a selected hero.
+So replace "selectedHero" with "hero" everywhere in the template. 
 
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
+When you're done, the `HeroDetailComponent` template should look like this:
 
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-Keep the app transpiling and running while you build the Tour of Heroes
-by entering the `npm start` command in a terminal window
-[as you did before](tutorial/toh-pt1#keep-transpiling "Keep the app running").
-
-## Make a hero detail component
-Add a file named `hero-detail.component.ts` to the `app/` folder.
-This file will hold the new `HeroDetailComponent`.
-
-The file and component names follow the standard described in the Angular
-[style guide](guide/styleguide#naming).
-
-* The component _class_ name should be written in _upper camel case_ and end in the word "Component".
-The hero detail component class is `HeroDetailComponent`.
-
-* The component _file_ name should be spelled in [_lower dash case_](guide/glossary#dash-case),
-each word separated by dashes, and end in `.component.ts`.
-The `HeroDetailComponent` class goes in the `hero-detail.component.ts` file.
-
-Start writing the `HeroDetailComponent` as follows:
-
-
-<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="v1" title="app/hero-detail.component.ts (initial version)" linenums="false">
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.html" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
+### Add the *@Input() hero* property
 
+The `HeroDetailComponent` template binds to the component's `hero` property
+which is of type `Hero`.
 
-{@a selector}
+Open the `HeroDetailComponent` class file and import the `Hero` symbol.
 
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" 
+region="import-hero" title="src/app/hero-detail/hero-detail.component.ts (import Hero)">
+</code-example>
 
-To define a component, you always import the `Component` symbol.
+The `hero` property 
+[must be an _Input_ property](guide/template-syntax#inputs-outputs "Input and Output properties"),
+annotated with the `@Input()` decorator,
+because the _external_ `HeroesComponent` [will bind to it](#heroes-component-template) like this.
 
-The `@Component` decorator provides the Angular metadata for the component.
-The CSS selector name, `hero-detail`, will match the element tag
-that identifies this component within a parent component's template.
-[Near the end of this tutorial page](tutorial/toh-pt3#add-hero-detail "Add the HeroDetailComponent to the AppComponent"),
-you'll add a `<hero-detail>` element to the `AppComponent` template.
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding">
+</code-example>
 
-Always `export` the component class because you'll always `import` it elsewhere.
+Amend the `@angular/core` import statement to include the `Input` symbol.
 
-### Hero detail template
-To move the hero detail view to the `HeroDetailComponent`,
-cut the hero detail _content_ from the bottom of the `AppComponent` template
-and paste it into a new `template` property in the `@Component` metadata.
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (import Input)" linenums="false">
+</code-example>
 
-The `HeroDetailComponent` has a _hero_, not a _selected hero_.
-Replace the word, "selectedHero", with the word, "hero", everywhere in the template.
-When you're done, the new template should look like this:
+Add a `hero` property, preceded by the `@Input()` decorator.
 
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="input-hero"  linenums="false">
+</code-example>
 
-<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="template" title="src/app/hero-detail.component.ts (template)" linenums="false">
+That's the only change you should make to the `HeroDetailComponent` class.
+There are no more properties. There's no presentation logic. 
+This component simply receives a hero object through its `hero` property and displays it.
+
+## Show the _HeroDetailComponent_
+
+The `HeroesComponent` is still a master/detail view. 
+
+It used to display the hero details on its own, before you cut that portion of the template. Now it will delegate to the `HeroDetailComponent`.
+
+The two components will have a parent/child relationship.
+The parent `HeroesComponent` will control the child `HeroDetailComponent` 
+by sending it a new hero to display whenever
+the user selects a hero from the list.
+
+You won't change the `HeroesComponent` _class_ but you will change its _template_.
+
+{@a heroes-component-template}
+
+### Update the _HeroesComponent_ template
+
+The `HeroDetailComponent` selector is `'app-hero-detail'`.
+Add an `<app-hero-detail>` element near the bottom of the `HeroesComponent` template, where the hero detail view used to be.
+
+Bind the `HeroesComponent.selectedHero` to the element's `hero` property like this.
+
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding" title="hero-detail.component.html (HeroDetail binding)">
 
 </code-example>
 
+`[hero]="selectedHero"` is an Angular [property binding](guide/template-syntax#property-binding).
 
+It's a _one way_ data binding from
+the `selectedHero` property of the `HeroComponent` to the `hero` property of the target element, which maps to the `hero` property of the `HeroDetailComponent`.
 
-### Add the *hero* property
+Now when the user clicks a hero in the list, the `selectedHero` changes.
+When the `selectedHero` changes, the _property binding_ updates `hero`
+and the `HeroDetailComponent` displays the new hero.
 
-The `HeroDetailComponent` template binds to the component's `hero` property.
-Add that property to the `HeroDetailComponent` class like this:
-
-<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero" title="src/app/hero-detail.component.ts (hero property)">
+The revised `HeroesComponent` template should look like this:
 
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html"
+  title="heroes.component.html" linenums="false">
 </code-example>
 
-
-
-The `hero` property is typed as an instance of `Hero`.
-The `Hero` class is still in the `app.component.ts` file.
-Now there are two components that need to reference the `Hero` class.
-The Angular [style guide](guide/styleguide#rule-of-one "Style guide: rule of one") recommends one class per file anyway.
-
-Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
-
-
-<code-example path="toh-pt3/src/app/hero.ts" title="src/app/hero.ts" linenums="false">
-
-</code-example>
-
-
-
-Now that the `Hero` class is in its own file, the `AppComponent` and the `HeroDetailComponent` have to import it.
-Add the following `import` statement near the top of _both_ the `app.component.ts` and the `hero-detail.component.ts` files.
-
-<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero-import" title="src/app/hero-detail.component.ts">
-
-</code-example>
-
-
-
-### The *hero* property is an *input* property
-
-[Later in this page](tutorial/toh-pt3#add-hero-detail "Add the HeroDetailComponent to the AppComponent"),
-the parent `AppComponent` will tell the child `HeroDetailComponent` which hero to display
-by binding its `selectedHero` to the `hero` property of the `HeroDetailComponent`.
-The binding will look like this:
-
-<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="src/app/app.component.html" linenums="false">
-
-</code-example>
-
-
-
-Putting square brackets around the `hero` property, to the left of the equal sign (=),
-makes it the *target* of a property binding expression.
-You must declare a *target* binding property to be an *input* property.
-Otherwise, Angular rejects the binding and throws an error.
-
-First, amend the `@angular/core` import statement to include the `Input` symbol.
-
-<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="import-input" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-Then declare that `hero` is an *input* property by
-preceding it with the `@Input` decorator that you imported earlier.
-
-<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="hero" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-Read more about _input_ properties in the
-[Attribute Directives](guide/attribute-directives#why-input) page.
-
-
-</div>
-
-
-
-That's it. The `hero` property is the only thing in the `HeroDetailComponent` class.
-
-<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="class" title="src/src/app/hero-detail.component.ts" linenums="false">
-
-</code-example>
-
-
-
-All it does is receive a hero object through its `hero` input property and then bind to that property with its template.
-
-Here's the complete `HeroDetailComponent`.
-
-<code-example path="toh-pt3/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts">
-
-</code-example>
-
-
-
-
-## Declare _HeroDetailComponent_ in the _AppModule_
-Every component must be declared in one&mdash;and only one&mdash;NgModule.
-
-Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you can refer to it.
-
-<code-example path="toh-pt3/src/app/app.module.ts" region="hero-detail-import" title="src/app/app.module.ts">
-
-</code-example>
-
-
-
-Add `HeroDetailComponent` to the module's `declarations` array.
-
-
-<code-example path="toh-pt3/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
-
-</code-example>
-
-
-
-In general, the `declarations` array contains a list of application components, pipes, and directives that belong to the module.
-A component must be declared in a module before other components can reference it.
-This module declares only the two application components, `AppComponent` and `HeroDetailComponent`.
-
-<div class="l-sub-section">
-
-
-
-Read more about NgModules in the [NgModules](guide/ngmodule "NgModules") guide.
-
-
-</div>
-
-
-
-{@a add-hero-detail}
-
-
-
-## Add the _HeroDetailComponent_ to the _AppComponent_
-
-The `AppComponent` is still a master/detail view.
-It used to display the hero details on its own, before you cut out that portion of the template.
-Now it will delegate to the `HeroDetailComponent`.
-
-
-Recall that `hero-detail` is the CSS [`selector`](tutorial/toh-pt3#selector "HeroDetailComponent selector")
-in the `HeroDetailComponent` metadata.
-That's the tag name of the element that represents the `HeroDetailComponent`.
-
-Add a `<hero-detail>` element near the bottom of the `AppComponent` template,
-where the hero detail view used to be.
-
-Coordinate the master `AppComponent` with the `HeroDetailComponent`
-by binding the `selectedHero` property of the `AppComponent`
-to the `hero` property of the `HeroDetailComponent`.
-
-<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="app.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-Now every time the `selectedHero` changes, the `HeroDetailComponent` gets a new hero to display.
-
-The revised `AppComponent` template should look like this:
-
-
-<code-example path="toh-pt3/src/app/app.component.ts" region="hero-detail-template" title="app.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
+The browser refreshes and the app starts working again as it did before.
 
 ## What changed?
+
 As [before](tutorial/toh-pt2), whenever a user clicks on a hero name,
 the hero detail appears below the hero list.
-But now the `HeroDetailView` is presenting those details.
+Now the `HeroDetailComponent` is presenting those details instead of the `HeroesComponent`.
 
-Refactoring the original `AppComponent` into two components yields benefits, both now and in the future:
+Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
 
-1. You simplified the `AppComponent` by reducing its responsibilities.
+1. You simplified the `HeroesComponent` by reducing its responsibilities.
 
 1. You can evolve the `HeroDetailComponent` into a rich hero editor
-without touching the parent `AppComponent`.
+without touching the parent `HeroesComponent`.
 
-1. You can evolve the `AppComponent` without touching the hero detail view.
+1. You can evolve the `HeroesComponent` without touching the hero detail view.
 
-1. You can re-use the `HeroDetailComponent` in the template of some future parent component.
+1. You can re-use the `HeroDetailComponent` in the template of some future component.
 
-### Review the app structure
-Verify that you have the following structure:
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-Here are the code files discussed in this page.
+## Final code review
 
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
 
 <code-tabs>
 
-  <code-pane title="src/app/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail.component.ts">
-
+  <code-pane title="src/app/hero-detail/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail/hero-detail.component.ts">
   </code-pane>
 
-  <code-pane title="src/app/app.component.ts" path="toh-pt3/src/app/app.component.ts">
-
+  <code-pane title="src/app/hero-detail/hero-detail.component.html" path="toh-pt3/src/app/hero-detail/hero-detail.component.html">
   </code-pane>
 
-  <code-pane title="src/app/hero.ts" path="toh-pt3/src/app/hero.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts" path="toh-pt3/src/app/app.module.ts">
-
+  <code-pane title="src/app/heroes/heroes-component.html" path="toh-pt3/src/app/heroes/heroes.component.html">
   </code-pane>
 
 </code-tabs>
 
-
-
-
 ## Summary
 
-Here's what you achieved in this page:
-
-* You created a reusable component.
-* You learned how to make a component accept input.
-* You learned to declare the required application directives in an NgModule. You
-listed the directives in the `@NgModule` decorator's `declarations` array.
-* You learned to bind a parent component to a child component.
-
-Your app should look like this <live-example></live-example>.
+* You created a separate, reusable `HeroDetailComponent`.
 
 
+* You used a [property binding](guide/template-syntax#property-binding) to give the parent `HeroesComponent` control over the child `HeroDetailComponent`.
 
-## Next step
-The Tour of Heroes app is more reusable with shared components,
-but its (mock) data is still hard coded within the `AppComponent`.
-That's not sustainable.
-Data access should be refactored to a separate service
-and shared among the components that need data.
 
-You’ll learn to create services in the [next tutorial](tutorial/toh-pt4 "Services") page.
+* You used the [`@Input` decorator](guide/template-syntax#inputs-outputs) 
+to make the `hero` property available for binding
+by the external `HeroesComponent`.
diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md
index 1dda98e21d..fe7a818f8a 100644
--- a/aio/content/tutorial/toh-pt4.md
+++ b/aio/content/tutorial/toh-pt4.md
@@ -1,630 +1,441 @@
-@title
-Services
+# Services
 
-@intro
-Create a reusable service to manage the hero data calls.
+The Tour of Heroes `HeroesComponent` is currently getting and displaying fake data.
 
-@description
+After the refactoring in this tutorial, `HeroesComponent` will be lean and focused on supporting the view.
+It will also be easier to unit-test with a mock services.
+
+## Why services
+
+Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data.
+They should focus on presenting data and delegate data access to a service.
+
+In this tutorial, you'll create a `HeroService` that all application classes can use to get heroes.
+Instead of creating that service with `new`, 
+you'll rely on Angular [*dependency injection*](guide/dependency-injection) 
+to inject it into the `HeroesComponent` constructor.
+
+Services are a great way to share information among classes that _don't know each other_.
+You'll create a `MessageService` and inject it in two places:
+
+1. in `HeroService` which uses the service to send a message.
+2. in `MessagesComponent` which displays that message.
 
 
-As the Tour of Heroes app evolves, you'll add more components that need access to hero data.
-
-Instead of copying and pasting the same code over and over,
-you'll create a single reusable data service and
-inject it into the components that need it.
-Using a separate service keeps components lean and focused on supporting the view,
-and makes it easy to unit-test components with a mock service.
-
-Because data services are invariably asynchronous,
-you'll finish the page with a *Promise*-based version of the data service.
-
-When you're done with this page, the app should look like this <live-example></live-example>.
-
-
-
-## Where you left off
-Before continuing with the Tour of Heroes, verify that you have the following structure.
-If not, go back to the previous pages.
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-## Keep the app transpiling and running
-Enter the following command in the terminal window:
+## Create the _HeroService_
 
+Using the Angular CLI, create a service called `hero`.
 
 <code-example language="sh" class="code-shell">
-  npm start
-
+  ng generate service hero
 </code-example>
 
+The command generates skeleton `HeroService` class in `src/app.hero.service.ts`
+The `HeroService` class should look like the below.
 
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="new"
+ title="src/app/hero.service.ts (new service)" linenums="false">
+</code-example>
 
-This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
+### _@Injectable()_ services
 
-You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
+Notice that the new service imports the Angular `Injectable` symbol and annotates
+the class with the `@Injectable()` decorator.
 
-## Creating a hero service
-The stakeholders want to show the heroes in various ways on different pages.
-Users can already select a hero from a list.
-Soon you'll add a dashboard with the top performing heroes and create a separate view for editing hero details.
-All three views need hero data.
-
-At the moment, the `AppComponent` defines mock heroes for display.
-However, defining heroes is not the component's job,
-and you can't easily share the list of heroes with other components and views.
-In this page, you'll move the hero data acquisition business to a single service that provides the data and
-share that service with all components that need the data.
-
-### Create the HeroService
-Create a file in the `app` folder called `hero.service.ts`.
+The `@Injectable()` decorator tells Angular that this service _might_ itself
+have injected dependencies.
+It doesn't have dependencies now but [it will soon](#inject-message-service}.
+Whether it does or it doesn't, it's good practice to keep the decorator.
 
 <div class="l-sub-section">
 
-
-
-The naming convention for service files is the service name in lowercase followed by `.service`.
-For a multi-word service name, use lower [dash-case](guide/glossary#dash-case).
-For example, the filename for `SpecialSuperHeroService` is `special-super-hero.service.ts`.
+The Angular [style guidelines](guide/styleguide#style-07-04) strongly recommend keeping it
+and the linter enforces this rule.
 
 </div>
 
+### Get hero data
 
+The `HeroService` could get hero data from anywhere&mdash;a web service, local storage, or a mock data source. 
 
-Name the class `HeroService` and export it for others to import.
+Removing data access from components means you can change your mind about the implementation anytime, without touching any components.
+They don't know how the service works.
 
+The implementation in _this_ tutorial will continue to deliver _mock heroes_.
 
-<code-example path="toh-pt4/src/app/hero.service.1.ts" region="empty-class" title="src/app/hero.service.ts (starting point)" linenums="false">
+Import the `Hero` and `HEROES`.
 
+<code-example path="toh-pt4/src/app/hero.service.ts" region="import-heroes">
 </code-example>
 
+Add a `getHeroes` method to return the _mock heroes_.
 
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="getHeroes">
+</code-example>
 
-### Injectable services
-Notice that you imported the Angular `Injectable` function and applied that function as an `@Injectable()` decorator.
+{@a provide}
+## Provide the `HeroService`
 
-<div class="callout is-helpful">
+You must _provide_ the `HeroService` in the _dependency injection system_
+before Angular can _inject_ it into the `HeroesComponent`, 
+as you will do [below](#inject).
 
+There are several ways to provide_ the `HeroService`: 
+in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`.
+Each option has pros and cons. 
 
+This tutorial chooses to provide it in the `AppModule`.
 
-Don't forget the parentheses. Omitting them leads to an error that's difficult to diagnose.
+That's such a popular choice that you could have told the CLI to provide it there automatically
+by appending `--module=app`.
 
+<code-example language="sh" class="code-shell">
+  ng generate service hero --module=app
+</code-example>
+
+Since you did not, you'll have to provide it yourself.
+
+Open the `AppModule` class, import the `HeroService`, and add it to the `@NgModule.providers` array.
+
+<code-example path="toh-pt4/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (providers)" region="providers">
+</code-example>
+
+The `providers` array tells Angular to create a single, shared instance of `HeroService`
+and inject into any class that asks for it.
+
+The `HeroService` is now ready to plug into the `HeroesComponent`.
+
+<div class="alert is-helpful">
+  Learn more about _providers_ in the [NgModules](guide/ngmodule#providers) guide.
 </div>
 
+## Update `HeroesComponent`
 
+Open the `HeroesComponent` class file.
 
-The `@Injectable()` decorator tells TypeScript to emit metadata about the service.
-The metadata specifies that Angular may need to inject other dependencies into this service.
-
-Although the `HeroService` doesn't have any dependencies at the moment,
-applying the `@Injectable()` decorator ​from the start ensures
-consistency and future-proofing.
-
-
-### Getting hero data
-Add a `getHeroes()` method stub.
-
-
-<code-example path="toh-pt4/src/app/hero.service.1.ts" region="getHeroes-stub" title="src/app/hero.service.ts (getHeroes stub)" linenums="false">
+Delete the `HEROES` import as you won't need that anymore.
+Import the `HeroService` instead.
 
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" title="src/app/heroes/heroes.component.ts (import HeroService)" region="hero-service-import">
 </code-example>
 
+Replace the the definition of the `heroes` property with a simple declaration.
 
-
-The `HeroService` could get `Hero` data from anywhere&mdash;a
-web service, local storage, or a mock data source.
-Removing data access from the component means
-you can change your mind about the implementation anytime,
-without touching the components that need hero data.
-
-### Move the mock hero data
-Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the `app` folder named `mock-heroes.ts`.
-Additionally, copy the `import {Hero} ...` statement because the heroes array uses the `Hero` class.
-
-
-<code-example path="toh-pt4/src/app/mock-heroes.ts" title="src/app/mock-heroes.ts">
-
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="heroes">
 </code-example>
 
+{@a inject}
 
+### Inject the `HeroService`
 
-The `HEROES` constant is exported so it can be imported elsewhere, such as the `HeroService`.
-
-In `app.component.ts`, where you cut the `HEROES` array,
-add an uninitialized `heroes` property:
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="heroes-prop" title="src/app/app.component.ts (heroes property)" linenums="false">
+Add a private `heroService` parameter of type `HeroService` to the constructor.
 
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="ctor">
 </code-example>
 
+The parameter simultaneously defines a private `heroService` property and identifies it as a `HeroService` injection site.
 
+When Angular creates a `HeroesComponent`, the [Dependency Injection](guide/dependency-injection) system
+sets the `heroService` parameter to the singleton instance of `HeroService`. 
 
-### Return mocked hero data
-Back in the `HeroService`, import the mock `HEROES` and return it from the `getHeroes()` method.
-The `HeroService` looks like this:
+### Add _getHeroes()_
 
-<code-example path="toh-pt4/src/app/hero.service.1.ts" region="full" title="src/app/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-### Import the hero service
-You're ready to use the `HeroService` in other components, starting with `AppComponent`.
-
-Import the `HeroService` so that you can reference it in the code.
-
-<code-example path="toh-pt4/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (hero-service-import)" region="hero-service-import">
-
-</code-example>
-
-
-
-### Don't use *new* with the *HeroService*
-How should the `AppComponent` acquire a runtime concrete `HeroService` instance?
-
-You could create a new instance of the `HeroService` with `new` like this:
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="new-service" title="src/app/app.component.ts" linenums="false">
-
-</code-example>
-
-
-
-However, this option isn't ideal for the following reasons:
-
-* The component has to know how to create a `HeroService`.
-If you change the `HeroService` constructor,
-you must find and update every place you created the service.
-Patching code in multiple places is error prone and adds to the test burden.
-* You create a service each time you use `new`.
-What if the service caches heroes and shares that cache with others?
-You couldn't do that.
-* With the `AppComponent` locked into a specific implementation of the `HeroService`,
-switching implementations for different scenarios, such as operating offline or using
-different mocked versions for testing, would be difficult.
-
-
-### Inject the *HeroService*
-
-Instead of using the *new* line, you'll add two lines.
-
- * Add a constructor that also defines a private property.
- * Add to the component's `providers` metadata.
-
-Add the constructor:
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="ctor" title="src/app/app.component.ts (constructor)">
-
-</code-example>
-
-
-
-The constructor itself does nothing. The parameter simultaneously
-defines a private `heroService` property and identifies it as a `HeroService` injection site.
-
-Now Angular knows to supply an instance of the `HeroService` when it creates an `AppComponent`.
-
-
-<div class="l-sub-section">
-
-
-
-Read more about dependency injection in the [Dependency Injection](guide/dependency-injection) page.
-
-</div>
-
-
-
-The *injector* doesn't know yet how to create a `HeroService`.
-If you ran the code now, Angular would fail with this error:
-
-<code-example format="nocode">
-  EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
-</code-example>
-
-
-
-To teach the injector how to make a `HeroService`,
-add the following `providers` array property to the bottom of the component metadata
-in the `@Component` call.
-
-
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (providers)" region="providers">
-
-</code-example>
-
-
-
-The `providers` array  tells Angular to create a fresh instance of the `HeroService` when it creates an `AppComponent`.
-The `AppComponent`, as well as its child components, can use that service to get hero data.
-
-{@a child-component}
-
-
-### *getHeroes()* in the *AppComponent*
-The service is in a `heroService` private variable.
-
-You could call the service and get the data in one line.
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
-
-</code-example>
-
-
-
-You don't really need a dedicated method to wrap one line.  Write it anyway:
-
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (getHeroes)" region="getHeroes">
+Create a function to retrieve the heroes from the service.
 
+<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="getHeroes">
 </code-example>
 
 {@a oninit}
 
-### The *ngOnInit* lifecycle hook
-`AppComponent` should fetch and display hero data with no issues.
+### Call it in `ngOnInit`
 
- You might be tempted to call the `getHeroes()` method in a constructor, but
-a constructor should not contain complex logic,
-especially a constructor that calls a server, such as a data access method.
-The constructor is for simple initializations, like wiring constructor parameters to properties.
+While you could call `getHeroes()` in the constructor, that's not the best practice.
 
-To have Angular call `getHeroes()`, you can implement the Angular *ngOnInit lifecycle hook*.
-Angular offers interfaces for tapping into critical moments in the component lifecycle:
-at creation, after each change, and at its eventual destruction.
+Reserve the constructor for simple initialization such as wiring constructor parameters to properties.
+The constructor shouldn't _do anything_.
+It certainly shouldn't call a function that makes HTTP requests to a remote server as a _real_ data service would.
 
-Each interface has a single method. When the component implements that method, Angular calls it at the appropriate time.
+Instead, call `getHeroes()` inside the [*ngOnInit lifecycle hook*](guide/lifecycle-hooks) and
+let Angular call `ngOnInit` at an appropriate time _after_ constructing a `HeroesComponent` instance.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="ng-on-init">
+</code-example>
+
+### See it run
+
+After the browser refreshes, the app should run as before, 
+showing a list of heroes and a hero detail view when you click on a hero name.
+
+## Observable data
+
+The `HeroService.getHeroes()` method has a _synchronous signature_,
+which implies that the `HeroService` can fetch heroes synchronously.
+The `HeroesComponent` consumes the `getHeroes()` result 
+as if heroes could be fetched synchronously.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="get-heroes">
+</code-example>
+
+This will not work in a real app.
+You're getting away with it now because the service currently returns _mock heroes_.
+But soon the app will fetch heroes from a remote server, 
+which is an inherently _asynchronous_ operation.
+
+The `HeroService` must wait for the server to respond,
+`getHeroes()` cannot return immediately with hero data,
+and the browser will not block while the service waits.
+
+`HeroService.getHeroes()` must have an _asynchronous signature_ of some kind.
+
+It can take a callback. It could return a `Promise`. It could return an `Observable`.
+
+In this tutorial, `HeroService.getHeroes()` will return an `Observable`
+in part because it will eventually use the Angular `HttpClient.get` method to fetch the heroes
+and [`HttpClient.get()` returns an `Observable`](guide/http).
+
+### Observable _HeroService_
+
+`Observable` is one of the key classes in the [RxJS library](http://reactivex.io/rxjs/).
+
+In a [later tutorial on HTTP](tutorial/toh-pt6), you'll learn that Angular's `HttpClient` methods return RxJS `Observable`s.
+In this tutorial, you'll simulate getting data from the server with the RxJS `of()` function.
+
+Open the `HeroService` file and import the `Observable` and `of` symbols from RxJS.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" 
+title="src/app/hero.service.ts (Observable imports)" region="import-observable">
+</code-example>
+
+Replace the `getHeroes` method with this one.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" region="getHeroes-1"></code-example>
+
+`of(HEROES)` returns an `Observable<Hero[]>` that emits  _a single value_, the array of mock heroes.
 
 <div class="l-sub-section">
 
-
-
-Read more about lifecycle hooks in the [Lifecycle Hooks](guide/lifecycle-hooks) page.
+In the [HTTP tutorial](tutorial/toh-pt6), you'll call `HttpClient.get<Hero[]>()` which also returns an `Observable<Hero[]>` that emits  _a single value_, an array of heroes from the body of the HTTP response.
 
 </div>
 
+### Subscribe in _HeroesComponent_
 
+The `HeroService.getHeroes` method used to return a `Hero[]`.
+Now it returns an `Observable<Hero[]>`.
 
-Here's the essential outline for the `OnInit` interface (don't copy this into your code):
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="on-init" title="src/app/app.component.ts" linenums="false">
-
-</code-example>
-
-
-
-Add the implementation for the `OnInit` interface to your export statement:
-
-<code-example format="nocode">
-  export class AppComponent implements OnInit {}
-</code-example>
-
-
-
-Write an `ngOnInit` method with the initialization logic inside. Angular will call it
-at the right time. In this case, initialize by calling `getHeroes()`.
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (ng-on-init)" region="ng-on-init">
-
-</code-example>
-
-
-
-The app should run as expected, showing a list of heroes and a hero detail view
-when you click on a hero name.
-{@a async}
-
-## Async services and Promises
-The `HeroService` returns a list of mock heroes immediately;
-its `getHeroes()` signature is synchronous.
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
-
-</code-example>
-
-
-
-Eventually, the hero data will come from a remote server.
-When using a remote server, users don't have to wait for the server to respond;
-additionally, you aren't able to block the UI during the wait.
-
-
-To coordinate the view with the response, 
-you can use *Promises*, which is an asynchronous 
-technique that changes the signature of the `getHeroes()` method.
-
-### The hero service makes a Promise
-
-A *Promise* essentially promises to call back when the results are ready.
-You ask an asynchronous service to do some work and give it a callback function.
-The service does that work and eventually calls the function with the results or an error.
-
-<div class="l-sub-section">
-
-
-
-This is a simplified explanation. Read more about ES2015 Promises in the
-[Promises for asynchronous programming](http://exploringjs.com/es6/ch_promises.html) page of
-[Exploring ES6](http://exploringjs.com/es6.html).
-
-
-</div>
-
-
-
-Update the `HeroService` with this Promise-returning `getHeroes()` method:
-
-<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-You're still mocking the data. You're simulating the behavior of an ultra-fast, zero-latency server,
-by returning an *immediately resolved Promise* with the mock heroes as the result.
-
-### Act on the Promise
-
-As a result of the change to `HeroService`, `this.heroes` is now set to a `Promise` rather than an array of heroes.
-
-<code-example path="toh-pt4/src/app/app.component.1.ts" region="getHeroes" title="src/app/app.component.ts (getHeroes - old)" linenums="false">
-
-</code-example>
-
-
-
-You have to change the implementation to *act on the `Promise` when it resolves*.
-When the `Promise` resolves successfully, you'll have heroes to display.
-
-Pass the callback function as an argument to the Promise's `then()` method:
-
-<code-example path="toh-pt4/src/app/app.component.ts" region="get-heroes" title="src/app/app.component.ts (getHeroes - revised)" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-As described in [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions),
-the ES2015 arrow function
-in the callback is more succinct than the equivalent function expression and gracefully handles `this`.
-
-</div>
-
-
-
-The callback sets the component's `heroes` property to the array of heroes returned by the service.
-
-The app is still running, showing a list of heroes, and
-responding to a name selection with a detail view.
-
-<div class="l-sub-section">
-
-
-
-At the end of this page, [Appendix: take it slow](tutorial/toh-pt4#slow) describes what the app might be like with a poor connection.
-
-</div>
-
-
-
-## Review the app structure
-Verify that you have the following structure after all of your refactoring:
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-        <div class='file'>
-          hero.service.ts
-        </div>
-
-        <div class='file'>
-          mock-heroes.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-Here are the code files discussed in this page.
+You'll have to adjust to that difference in `HeroesComponent`.
 
+Find the `getHeroes` method and replace it with the following code
+(shown side-by-side with the previous version for comparison)
 
 <code-tabs>
 
-  <code-pane title="src/app/hero.service.ts" path="toh-pt4/src/app/hero.service.ts">
-
+  <code-pane title="hero.component.ts (Observable)" 
+    path="toh-pt4/src/app/heroes/heroes.component.ts" region="getHeroes">
   </code-pane>
 
-  <code-pane title="src/app/app.component.ts" path="toh-pt4/src/app/app.component.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/mock-heroes.ts" path="toh-pt4/src/app/mock-heroes.ts">
-
+  <code-pane title="hero.component.ts (Original)" 
+    path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="getHeroes">
   </code-pane>
 
 </code-tabs>
 
+`Observable.subscribe()` is the critical difference.
 
+The previous version assigns an array of heroes to the component's `heroes` property.
+The assignment occurs _synchronously_, as if the server could return heroes instantly
+or the browser could freeze the UI while it waited for the server's response.
 
-## Summary
-Here's what you achieved in this page:
+That _won't work_ when the `HeroService` is actually making requests of a remote server.
 
-* You created a service class that can be shared by many components.
-* You used the `ngOnInit` lifecycle hook to get the hero data when the `AppComponent` activates.
-* You defined the `HeroService` as a provider for the `AppComponent`.
-* You created mock hero data and imported them into the service.
-* You designed the service to return a Promise and the component to get the data from the Promise.
+The new version waits for the `Observable` to emit the array of heroes&mdash; 
+which could happen now or several minutes from now.
+Then `subscribe` passes the emitted array to the callback,
+which sets the component's `heroes` property.
 
-Your app should look like this <live-example></live-example>.
+This asynchronous approach _will work_ when
+the `HeroService` requests heroes from the server.
 
-## Next step
-The Tour of Heroes has become more reusable using shared components and services.
-The next goal is to create a dashboard, add menu links that route between the views, and format data in a template.
-As the app evolves, you'll discover how to design it to make it easier to grow and maintain.
+## Show messages
 
-Read about the Angular component router and navigation among the views in the [next tutorial](tutorial/toh-pt5 "Routing and Navigation") page.
+In this section you will 
 
-{@a slow}
+* add a `MessagesComponent` that displays app messages at the bottom of the screen.
+* create an injectable, app-wide `MessageService` for sending messages to be displayed
+* inject `MessageService` into the `HeroService`
+* display a message when `HeroService` fetches heroes successfully.
 
-## Appendix: Take it slow
-To simulate a slow connection,
-import the `Hero` symbol and add the following `getHeroesSlowly()` method to the `HeroService`.
+### Create _MessagesComponent_
 
-<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes-slowly" title="app/hero.service.ts (getHeroesSlowly)" linenums="false">
+Use the CLI to create the `MessagesComponent`.
 
+<code-example language="sh" class="code-shell">
+  ng generate component messages
 </code-example>
 
+The CLI creates the component files in the `src/app/messages` folder and declare `MessagesComponent` in `AppModule`.
+
+Modify the `AppComponent` template to display the generated `MessagesComponent`
+
+<code-example
+  title = "/src/app/app.component.html"
+  path="toh-pt4/src/app/app.component.html">
+</code-example>
+
+You should see the default paragraph from `MessagesComponent` at the bottom of the page.
+
+### Create the _MessageService_
+
+Use the CLI to create the `MessageService` in `src/app`. 
+The `--module=app` option tells the CLI to  [_provide_ this service](#provide) in the `AppModule`,
+
+<code-example language="sh" class="code-shell">
+  ng generate service message --module=app
+</code-example>
+
+Open `MessageService` and replace its contents with the following.
+
+<code-example
+  title = "/src/app/message.service.ts"
+  path="toh-pt4/src/app/message.service.ts">
+</code-example>
+
+The service exposes its cache of `messages` and two methods: one to `add()` a message to the cache and another to `clear()` the cache.
+
+{@a inject-message-service}
+### Inject it into the `HeroService`
+
+Re-open the `HeroService` and import the `MessageService`.
+
+<code-example
+  title = "/src/app/hero.service.ts (import MessageService)"
+  path="toh-pt4/src/app/hero.service.ts" region="import-message-service">
+</code-example>
+
+Modify the constructor with a parameter that declares a private `messageService` property.
+Angular will inject the singleton `MessageService` into that property 
+when it creates the `HeroService`.
+
+<code-example
+  path="toh-pt4/src/app/hero.service.ts" region="ctor">
+</code-example>
+
+<div class="l-sub-section">
+
+This is a typical "*service-in-service*" scenario:
+you inject the `MessageService` into the `HeroService` which is injected into the `HeroesComponent`.
+
+</div>
+
+### Send a message from `HeroService`
+
+Modify the `getHeroes` method to send a message when the heroes are fetched.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" region="getHeroes">
+</code-example>
+
+### Display the message from `HeroService`
+
+The `MessagesComponent` should display all messages, 
+including the message sent by the `HeroService` when it fetches heroes.
+
+Open `MessagesComponent` and import the `MessageService`.
+
+<code-example
+  title = "/src/app/messages/messages.component.ts (import MessageService)"
+  path="toh-pt4/src/app/messages/messages.component.ts" region="import-message-service">
+</code-example>
+
+Modify the constructor with a parameter that declares a **public** `messageService` property.
+Angular will inject the singleton `MessageService` into that property 
+when it creates the `HeroService`.
+
+<code-example
+  path="toh-pt4/src/app/messages/messages.component.ts" region="ctor">
+</code-example>
+
+The `messageService` property **must be public** because you're about to bind to it in the template.
+
+<div class="alert is-important">
+
+Angular only binds to _public_ component properties.
+
+</div>
+
+### Bind to the _MessageService_
+
+Replace the CLI-generated `MessagesComponent` template with the following.
+
+<code-example
+  title = "src/app/messages/messages.component.html"
+  path="toh-pt4/src/app/messages/messages.component.html">
+</code-example>
+
+This template binds directly to the component's `messageService`.
+
+* The `*ngIf` only displays the messages area if there are messages to show.
 
 
-Like `getHeroes()`, it also returns a `Promise`.
-But this Promise waits two seconds before resolving the Promise with mock heroes.
+* An `*ngFor` presents the list of messages in repeated `<div>` elements.
 
-Back in the `AppComponent`, replace `getHeroes()` with `getHeroesSlowly()`
-and see how the app behaves.
+
+* An Angular [event binding](guide/template-syntax#event-binding) binds the button's click event
+to `MessageService.clear()`.
+
+The messages will look better when you add the private CSS styles to `messages.component.css`
+as listed in one of the ["final code review"](#final-code-review) tabs below.
+
+The browser refreshes and the page displays the list of heroes.
+Scroll to the bottom to see the message from the `HeroService` in the message area.
+Click the "clear" button and the message area disappears.
+
+{@a final-code-review}
+
+## Final code review
+
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+
+<code-tabs>
+
+  <code-pane title="src/app/hero.service.ts" 
+  path="toh-pt4/src/app/hero.service.ts">
+  </code-pane>
+
+  <code-pane title="src/app/message.service.ts" 
+  path="toh-pt4/src/app/message.service.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.ts"
+  path="toh-pt4/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.ts"
+  path="toh-pt4/src/app/messages/messages.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.html"
+  path="toh-pt4/src/app/messages/messages.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.css"
+  path="toh-pt4/src/app/messages/messages.component.css">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.html"
+  path="toh-pt4/src/app/app.component.html">
+  </code-pane>
+
+</code-tabs>
+
+## Summary
+
+* You refactored data access to the `HeroService` class.
+* You _provided_ the `HeroService` in the root `AppModule` so that it can be injected anywhere.
+* You used [Angular Dependency Injection](guide/dependency-injection) to inject it into a component.
+* You gave the `HeroService` _get data_ method an asynchronous signature.
+* You discovered `Observable` and the RxJS _Observable_ library.
+* You used RxJS `of()` to return an _Observable_ of mock heroes (`Observable<Hero[]>`).
+* The component's `ngOnInit` lifecycle hook calls the `HeroService` method, not the constructor.
+* You created a `MessageService` for loosely-coupled communication between classes.
+* The `HeroService` injected into a component is created with another injected service,
+ `MessageService`.
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md
index c3c6b96246..9a915f9b24 100644
--- a/aio/content/tutorial/toh-pt5.md
+++ b/aio/content/tutorial/toh-pt5.md
@@ -1,12 +1,4 @@
-@title
-Routing
-
-@intro
-Add the Angular component router and learn to navigate among the views.
-
-@description
-
-
+# Routing
 
 There are new requirements for the Tour of Heroes app:
 
@@ -17,1356 +9,601 @@ There are new requirements for the Tour of Heroes app:
 
 When you’re done, users will be able to navigate the app like this:
 
-
 <figure>
+
   <img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
+
 </figure>
 
+## Add the _AppRoutingModule_
 
+An Angular best practice is to load and configure the router in a separate, top-level module
+that is dedicated to routing and imported by the root `AppModule`.
 
-To satisfy these requirements, you'll add Angular’s router to the app.
-
-
-<div class="l-sub-section">
-
-
-
-For more information about the router, read the [Routing and Navigation](guide/router) page.
-
-
-</div>
-
-
-
-When you're done with this page, the app should look like this <live-example></live-example>.
-
-
-
-## Where you left off
-Before continuing with the Tour of Heroes, verify that you have the following structure.
-
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          hero.service.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-        <div class='file'>
-          mock-heroes.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-## Keep the app transpiling and running
-Enter the following command in the terminal window:
+By convention, the module class name is `AppRoutingModule` and it belongs in the `app-routing.module.ts` in the `src/app` folder.
 
+Use the CLI to generate it.
 
 <code-example language="sh" class="code-shell">
-  npm start
-
+  ng generate module app-routing --flat --module=app
 </code-example>
 
-
-
-This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
-
-
-You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
-
-## Action plan
-
-Here's the plan:
-
-* Turn `AppComponent` into an application shell that only handles navigation.
-* Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`.
-* Add routing.
-* Create a new `DashboardComponent`.
-* Tie the *Dashboard* into the navigation structure.
-
-
 <div class="l-sub-section">
 
-
-
-*Routing* is another name for *navigation*. The router is the mechanism for navigating from view to view.
-
-
+`--flat` puts the file in `src/app` instead of its own folder.<br>
+`--module=app` tells the CLI to register it in the `imports` array of the `AppModule`.
 </div>
 
+The generated file looks like this:
 
-
-
-## Splitting the *AppComponent*
-
-The current app loads `AppComponent` and immediately displays the list of heroes.
-
-The revised app should present a shell with a choice of views (*Dashboard* and *Heroes*)
-and then default to one of them.
-
-The `AppComponent` should only handle navigation, so you'll
-move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
-
-### *HeroesComponent*
-
-`AppComponent` is already dedicated to *Heroes*.
-Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent`
-and create a separate `AppComponent` shell.
-
-Do the following:
-
-* Rename the <code>app.component.ts</code> file to <code>heroes.component.ts</code>.
-* Rename the `AppComponent` class as `HeroesComponent` (rename locally, _only_ in this file).
-* Rename the selector `my-app` as `my-heroes`.
-
-
-<code-example path="toh-pt5/src/app/heroes.component.ts" region="renaming" title="src/app/heroes.component.ts (showing renamings only)">
-
+<code-example path="toh-pt5/src/app/app-routing.module.0.ts" 
+  title="src/app/app-routing.module.ts (generated)">
 </code-example>
 
+You generally don't declare components in a routing module so you can delete the
+`@NgModule.declarations` array and delete `CommonModule` references too.
 
+You'll configure the router with `Routes` in the `RouterModule`
+so import those two symbols from the `@angular/router` library.
 
-### Create *AppComponent*
+Add an `@NgModule.exports` array with `RouterModule` in it.
+Exporting `RouterModule` makes router directives available for use
+in the `AppModule` components that will need them.
 
-The new `AppComponent` is the application shell.
-It will have some navigation links at the top and a display area below.
-
-Perform these steps:
-
-* Create the file <code>src/app/app.component.ts</code>.
-* Define an exported `AppComponent` class.
-* Add an `@Component` decorator above the class with a `my-app` selector.
-* Move the following from `HeroesComponent` to `AppComponent`:
-
-  * `title` class property.
-  * `@Component` template `<h1>` element, which contains a binding to  `title`.
-
-* Add a `<my-heroes>` element to the app template just below the heading so you still see the heroes.
-* Add `HeroesComponent` to the `declarations` array of `AppModule` so Angular recognizes the `<my-heroes>` tags.
-* Add `HeroService` to the  `providers` array of `AppModule` because you'll need it in every other view.
-* Remove `HeroService` from the `HeroesComponent` `providers` array since it was promoted.
-* Add the supporting `import` statements for `AppComponent`.
-
-The first draft looks like this:
-
-
-<code-tabs>
-
-  <code-pane title="src/app/app.component.ts (v1)" path="toh-pt5/src/app/app.component.1.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts (v1)" path="toh-pt5/src/app/app.module.1.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-The app still runs and displays heroes.
-
-
-## Add routing
-
-Instead of displaying automatically, heroes should display after users click a button.
-In other words, users should be able to navigate to the list of heroes.
-
-Use the Angular router to enable navigation.
-
-
-The Angular router is an external, optional Angular NgModule called `RouterModule`.
-The router is a combination of multiple provided services (`RouterModule`),
-multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
-and a configuration (`Routes`). You'll configure the routes first.
-
-
-### *&lt;base href>*
-
-Open `index.html` and ensure there is a `<base href="...">` element
-(or a script that dynamically sets this element)
-at the top of the `<head>` section.
-
-
-<code-example path="toh-pt5/src/index.html" region="base-href" title="src/index.html (base-href)">
+`AppRoutingModule` looks like this now:
 
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="v1"
+  title="src/app/app-routing.module.ts (v1)">
 </code-example>
 
+### Add routes
 
-
-<div class="callout is-important">
-
-
-
-<header>
-  base href is essential
-</header>
-
-
-
-For more information, see the [Set the base href](guide/router)
-section of the [Routing and Navigation](guide/router) page.
-
-
-
-</div>
-
-
-
-{@a configure-routes}
-
-
-### Configure routes
-
-Create a configuration file for the app routes.
-
-
-*Routes* tell the router which views to display when a user clicks a link or
+*Routes* tell the router which view to display when a user clicks a link or
 pastes a URL into the browser address bar.
 
-Define the first route as a route to the heroes component.
+A typical Angular `Route` has two properties:
 
+1. `path`: a string that matches the URL in the browser address bar.
+1. `component`: the component that the router should create when navigating to this route.
 
-<code-example path="toh-pt5/src/app/app.module.2.ts" region="heroes" title="src/app/app.module.ts (heroes route)">
+You intend to navigate to the `HeroesComponent` when the URL is something like `localhost:4200/heroes`.
 
+Import the `HeroesComponent` so you can reference it in a `Route`.
+Then define an array of routes with a single `route` to that component.
+
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="heroes-route">
 </code-example>
 
+Once you've finished setting up, the router will match that URL to `path: 'heroes'` 
+and display the `HeroesComponent`, .
 
+### _RouterModule.forRoot()_
 
-The `Routes` are an array of *route definitions*.
-
-This route definition has the following parts:
-
-* *Path*: The router matches this route's path to the URL in the browser address bar (`heroes`).
-* *Component*: The component that the router should create when navigating to this route (`HeroesComponent`).
+You first must initialize the router and start it listening for browser location changes.
 
+Add `RouterModule` to the `@NgModule.imports` array and 
+configure it with the `routes` in one step by calling 
+`RouterModule.forRoot()` _within_ the `imports` array, like this:
 
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="ngmodule-imports">
+</code-example>
 
 <div class="l-sub-section">
 
+  The method is called `forRoot()` because you configure the router at the application's root level.
+  The `forRoot()` method supplies the service providers and directives needed for routing, 
+  and performs the initial navigation based on the current browser URL.
 
+</div>
 
-Read more about defining routes with `Routes` in the [Routing & Navigation](guide/router) page.
+## Add _RouterOutlet_
 
+Open the `AppComponent` template replace the `<app-heroes>` element with a `<router-outlet>` element.
+
+<code-example path="toh-pt5/src/app/app.component.html" 
+  region="outlet"
+  title="src/app/app.component.html (router-outlet)">
+</code-example>
+
+You removed `<app-heroes>` because you will only display the `HeroesComponent` when the user navigates to it.
+
+The `<router-outlet>` tells the router where to display routed views.
+
+<div class="l-sub-section">
+
+The `RouterOutlet` is one of the router directives that became available to the `AppComponent`
+because `AppModule` imports `AppRoutingModule` which exported `RouterModule`.
+
+</div>
+
+#### Try it
+
+You should still be running with this CLI command.
+
+<code-example language="sh" class="code-shell">
+  ng serve
+</code-example>
+
+The browser should refresh and display the app title but not the list of heroes.
+
+Look at the browser's address bar. 
+The URL ends in `/`.
+The route path to `HeroesComponent` is `/heroes`.
+
+Append `/heroes` to the URL in the browser address bar.
+You should see the familiar heroes master/detail view.
+
+{@a routerlink}
+
+## Add a navigation link (_routerLink_)
+
+Users shouldn't have to paste a route URL into the address bar. 
+They should be able to click a link to navigate.
+
+Add a `<nav>` element and, within that, an anchor element that, when clicked, 
+triggers navigation to the `HeroesComponent`.
+The revised `AppComponent` template looks like this:
+
+<code-example 
+  path="toh-pt5/src/app/app.component.html" 
+  region="heroes"
+  title="src/app/app.component.html (heroes RouterLink)">
+</code-example>
+
+A [`routerLink` attribute](#routerlink) is set to `"/heroes"`,
+the string that the router matches to the route to `HeroesComponent`.
+The `routerLink` is the selector for the [`RouterLink` directive](#routerlink)
+that turns user clicks into router navigations.
+It's another of the public directives in the `RouterModule`.
+
+The browser refreshes and displays the app title and heroes link, 
+but not the heroes list.
+
+Click the link. 
+The address bar updates to `/heroes` and the list of heroes appears.
+
+<div class="l-sub-section">
+
+Make this and future navigation links look better by adding private CSS styles to `app.component.css`
+as listed in the [final code review](#appcomponent) below.
 
 </div>
 
 
+## Add a dashboard view
 
-### Make the router available
+Routing makes more sense when there are multiple views.
+So far there's only the heroes view. 
 
-Import the `RouterModule` and add it to the `AppModule` imports array.
-
-
-<code-example path="toh-pt5/src/app/app.module.2.ts" title="src/app/app.module.ts (app routing)">
+Add a `DashboardComponent` using the CLI:
 
+<code-example language="sh" class="code-shell">
+  ng generate component dashboard
 </code-example>
 
+The CLI generates the files for the `DashboardComponent` and declares it in `AppModule`.
 
+Replace the default file content in these three files as follows and then return for a little discussion:
 
-<div class="l-sub-section">
+<code-tabs>
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.html" path="toh-pt5/src/app/dashboard/dashboard.component.1.html">
+  </code-pane>
 
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.ts" path="toh-pt5/src/app/dashboard/dashboard.component.ts">
+  </code-pane>
 
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.css" path="toh-pt5/src/app/dashboard/dashboard.component.css">
+  </code-pane>
+</code-tabs>
 
-The `forRoot()` method is called because a configured router is provided at the app's root.
-The `forRoot()` method supplies the Router service providers and directives needed for routing, and
-performs the initial navigation based on the current browser URL.
+The  _template_ presents a grid of hero name links.
 
+* The `*ngFor` repeater creates as many links as are in the component's `heroes` array.
+* The links are styled as colored blocks by the `dashboard.component.css`.
+* The links don't go anywhere yet but [they will shortly](#hero-details).
 
-</div>
+The _class_ is similar to the `HeroesComponent` class.
+* It defines a `heroes` array property.
+* The constructor expects Angular to inject the `HeroService` into a private `heroService` property.
+* The `ngOnInit()` lifecycle hook calls `getHeroes`.
 
+This `getHeroes` reduces the number of heroes displayed to four
+(2nd, 3rd, 4th, and 5th).
 
-
-### Router outlet
-
-If you paste the path, `/heroes`, into the browser address bar at the end of the URL,
-the router should match it to the `heroes` route and display the `HeroesComponent`.
-However, you have to tell the router where to display the component.
-To do this, you can add a `<router-outlet>` element at the end of the template.
-`RouterOutlet` is one of the directives provided by the `RouterModule`.
-The router displays each component immediately below the `<router-outlet>` as users navigate through the app.
-
-### Router links
-
-Users shouldn't have to paste a route URL into the address bar.
-Instead, add an anchor tag to the template that, when clicked, triggers navigation to the `HeroesComponent`.
-
-The revised template looks like this:
-
-
-<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v2" title="src/app/app.component.ts (template-v2)">
-
+<code-example path="toh-pt5/src/app/dashboard/dashboard.component.ts" region="getHeroes">
 </code-example>
 
+### Add the dashboard route
 
+To navigate to the dashboard, the router needs an appropriate route.
 
-Note the `routerLink` binding in the anchor tag.
-The `RouterLink` directive (another of the `RouterModule` directives) is bound to a string
-that tells the router where to navigate when the user clicks the link.
-
-Since the link is not dynamic, a routing instruction is defined with a one-time binding to the route path.
-Looking back at the route configuration, you can confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
-
-<div class="l-sub-section">
-
-
-
-Read more about dynamic router links and the link parameters array
-in the [Appendix: Link Parameters Array](guide/router#link-parameters-array) section of the
-[Routing & Navigation](guide/router) page.
-
-
-</div>
-
-
-
-Refresh the browser. The browser displays the app title and heroes link, but not the heroes list.
-
-
-<div class="l-sub-section">
-
-
-
-The browser's address bar shows `/`.
-The route path to `HeroesComponent` is `/heroes`, not `/`.
-Soon you'll add a route that matches the path `/`.
-
-
-</div>
-
-
-
-Click the *Heroes* navigation link. The address bar updates to `/heroes`
-and the list of heroes displays.
-
-`AppComponent` now looks like this:
-
-
-<code-example path="toh-pt5/src/app/app.component.1.ts" region="v2" title="src/app/app.component.ts (v2)">
+Import the `DashboardComponent` in the `AppRoutingModule`.
 
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="import-dashboard" 
+  title="src/app/app-routing.module.ts (import DashboardComponent)">
 </code-example>
 
+Add a route to the `AppRoutingModule.routes` array that matches a path to the `DashboardComponent`.
 
-
-The  *AppComponent* is now attached to a router and displays routed views.
-For this reason, and to distinguish it from other kinds of components,
-this component type is called a *router component*.
-
-
-## Add a dashboard
-
-Routing only makes sense when multiple views exist.
-To add another view, create a placeholder `DashboardComponent`, which users can navigate to and from.
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.1.ts" title="src/app/dashboard.component.ts (v1)">
-
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="dashboard-route">
 </code-example>
 
+### Add a default route
 
+When the app starts, the browsers address bar points to the web site's root.
+That doesn't match any existing route so the router doesn't navigate anywhere.
+The space below the `<router-outlet>` is blank.
 
-You'll make this component more useful later.
-
-### Configure the dashboard route
-
-To teach `app.module.ts` to navigate to the dashboard,
-import the dashboard component and
-add the following route definition to the `Routes` array of definitions.
-
-
-<code-example path="toh-pt5/src/app/app.module.3.ts" region="dashboard" title="src/app/app.module.ts (Dashboard route)">
+To make the app navigate to the dashboard automatically, add the following
+route to the `AppRoutingModule.Routes` array.
 
+<code-example path="toh-pt5/src/app/app-routing.module.ts" region="redirect-route">
 </code-example>
 
+This route redirects a URL that fully matches the empty path to the route whose path is `'/dashboard'`.
 
+After the browser refreshes, the router loads the `DashboardComponent
+and the browser address bar shows the `/dashboard` URL.
 
-Also import and add `DashboardComponent` to the `AppModule`'s `declarations`.
+### Add dashboard link to the shell
 
+The user should be able to navigate back and forth between the
+`DashboardComponent` and the `HeroesComponent` by clicking links in the
+navigation area near the top of the page.
 
-<code-example path="toh-pt5/src/app/app.module.ts" region="dashboard" title="src/app/app.module.ts (dashboard)">
+Add a dashboard navigation link to the `AppComponent` shell template, just above the *Heroes* link.
 
+<code-example path="toh-pt5/src/app/app.component.html" title="src/app/app.component.html">
 </code-example>
 
+After the browser refreshes you can navigate freely between the two views by clicking the links.
 
-
-### Add a redirect route
-
-Currently, the browser launches with `/` in the address bar.
-When the app starts, it should show the dashboard and
-display a `/dashboard` URL in the browser address bar.
-
-
-To make this happen, use a redirect route. Add the following
-to the array of route definitions:
-
-
-<code-example path="toh-pt5/src/app/app.module.3.ts" region="redirect" title="src/app/app.module.ts (redirect)">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-Read more about *redirects* in the [Redirecting routes](guide/router) section
-of the [Routing & Navigation](guide/router) page.
-
-
-</div>
-
-
-
-### Add navigation to the template
-
-Add a dashboard navigation link to the template, just above the *Heroes* link.
-
-
-<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v3" title="src/app/app.component.ts (template-v3)">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-The `<nav>` tags don't do anything yet, but they'll be useful later when you style the links.
-
-
-</div>
-
-
-
-In your browser, go to the application root (`/`) and reload.
-The app displays the dashboard and you can navigate between the dashboard and the heroes.
-
-## Add heroes to the dashboard
-
-To make the dashboard more interesting, you'll display the top four heroes at a glance.
-
-Replace the `template` metadata with a `templateUrl` property that points to a new
-template file.
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.ts" region="metadata" title="src/app/dashboard.component.ts (metadata)">
-
-</code-example>
-
-
-
-Create that file with this content:
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.1.html" title="src/app/dashboard.component.html">
-
-</code-example>
-
-
-
-`*ngFor` is used again to iterate over a list of heroes and display their names.
-The extra `<div>` elements will help with styling later.
-
-### Sharing the *HeroService*
-
-To populate the component's `heroes` array, you can re-use the `HeroService`.
-
-Earlier, you removed the `HeroService` from the `providers` array of `HeroesComponent`
-and added it to the `providers` array of `AppModule`.
-That move created a singleton `HeroService` instance, available to all components of the app.
-Angular injects `HeroService` and you can use it in the `DashboardComponent`.
-
-### Get heroes
-
-In <code>dashboard.component.ts</code>, add the following `import` statements.
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.ts" region="imports" title="src/app/dashboard.component.ts (imports)">
-
-</code-example>
-
-
-
-Now create the `DashboardComponent` class like this:
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.ts" region="class" title="src/app/dashboard.component.ts (class)">
-
-</code-example>
-
-
-
-This kind of logic is also used in the `HeroesComponent`:
-
-* Define a `heroes` array property.
-* Inject the `HeroService` in the constructor and hold it in a private `heroService` field.
-* Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.
-
-In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice` method.
-
-Refresh the browser to see four hero names in the new dashboard.
-
-
-
+{@a hero-details}
 ## Navigating to hero details
 
-While the details of a selected hero displays at the bottom of the `HeroesComponent`,
-users should be able to navigate to the `HeroDetailComponent` in the following additional ways:
+The `HeroDetailsComponent` displays details of a selected hero.
+At the moment the `HeroDetailsComponent` is only visible at the bottom of the `HeroesComponent`
 
-* From the dashboard to a selected hero.
-* From the heroes list to a selected hero.
-* From a "deep link" URL pasted into the browser address bar.
+The user should be able to get to these details in three ways.
+1. By clicking a hero in the dashboard.
+1. By clicking a hero in the heroes list.
+1. By pasting a "deep link" URL into the browser address bar that identifies the hero to display.
 
-### Routing to a hero detail
+In this section, you'll enable navigation to the `HeroDetailsComponent`
+and liberate it from the `HeroesComponent`.
 
-You can add a route to the `HeroDetailComponent` in `app.module.ts`, where the other routes are configured.
+### Delete _hero details_ from _HeroesComponent_
 
-The new route is unusual in that you must tell the `HeroDetailComponent` which hero to show.
-You didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
+When the user clicks a hero item in the `HeroesComponent`,
+the app should navigate to the `HeroDetailComponent`,
+replacing the heroes list view with the hero detail view.
+The heroes list view should no longer show hero details as it does now.
 
-Currently, the parent `HeroesComponent` sets the component's `hero` property to a
-hero object with a binding like this:
+Open the `HeroesComponent` template (`heroes/heroes.component.html`) and
+delete the `<app-hero-detail>` element from the bottom.
 
+Clicking a hero item now does nothing. 
+You'll [fix that shortly](#heroes-component-links) after you enable routing to the `HeroDetailComponent`.
 
-<code-example language="html">
-  &lt;hero-detail [hero]="selectedHero">&lt;/hero-detail>
+### Add a _hero detail_ route
 
+A URL like `~/detail/11` would be a good URL for navigating to the *Hero Detail* view of the hero whose `id` is `11`. 
+
+Open `AppRoutingModule` and import `HeroDetailComponent`.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="import-herodetail" 
+  title="src/app/app-routing.module.ts (import HeroDetailComponent)">
 </code-example>
 
+Then add a _parameterized_ route to the `AppRoutingModule.routes` array that matches the path pattern to the _hero detail_ view.
 
-
-But this binding won't work in any of the routing scenarios.
-
-### Parameterized route
-
-You can add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
-you could expect to see a URL such as this:
-
-
-<code-example format="nocode">
-  /detail/11
-
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="detail-route">
 </code-example>
 
+The colon (:) in the `path` indicates that `:id` is a placeholder for a specific hero `id`.
 
+At this point, all application routes are in place.
 
-The `/detail/` part of the URL is constant. The trailing numeric `id` changes from hero to hero.
-You need to represent the variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
-
-### Configure a route with a parameter
-
-Use the following *route definition*.
-
-
-<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
-
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="routes" 
+  title="src/app/app-routing.module.ts (all routes)">
 </code-example>
 
+### _DashboardComponent_ hero links
 
+The `DashboardComponent` hero links do nothing at the moment.
 
-The colon (:) in the path indicates that `:id` is a placeholder for a specific hero `id`
-when navigating to the `HeroDetailComponent`.
-
-
-<div class="l-sub-section">
-
-
-
-Be sure to import the hero detail component before creating this route.
-
-
-</div>
-
-
-
-You're finished with the app routes.
-
-You didn't add a `'Hero Detail'` link to the template because users
-don't click a navigation *link* to view a particular hero;
-they click a *hero name*, whether the name displays on the dashboard or in the heroes list.
-
-You don't need to add the hero clicks until the `HeroDetailComponent`
-is revised and ready to be navigated to.
-
-
-
-## Revise the *HeroDetailComponent*
-
-Here's what the `HeroDetailComponent` looks like now:
-
-
-<code-example path="toh-pt4/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts (current)">
+Now that the router has a route to `HeroDetailComponent`,
+fix the dashboard hero links to navigate via the _parameterized_ dashboard route.
 
+<code-example 
+  path="toh-pt5/src/app/dashboard/dashboard.component.html" 
+  region="click" 
+  title="src/app/dashboard/dashboard.component.html (hero links)">
 </code-example>
 
+You're using Angular [interpolation binding](guide/template-syntax#interpolation) within the `*ngFor` repeater 
+to insert the current interation's `hero.id` into each 
+[`routerLink`](#routerlink).
 
+{@a heroes-component-links}
+### _HeroesComponent_ hero links
 
-The template won't change. Hero names will display the same way.
-The major changes are driven by how you get hero names.
+The hero items in the `HeroesComponent` are `<li>` elements whose click events
+are bound to the component's `onSelect()` method.
 
+<code-example 
+  path="toh-pt4/src/app/heroes/heroes.component.html" 
+  region="list" 
+  title="src/app/heroes/heroes.component.html (list with onSelect)">
+</code-example>
 
-You'll no longer receive the hero in a parent component property binding.
-The new `HeroDetailComponent` should take the `id` parameter from the `paramMap` Observable
-in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
+Strip the `<li>` back to just its `*ngFor`,
+wrap the badge and name in an anchor element (`<a>`),
+and add a `routerLink` attribute to the anchor that 
+is the same as in the dashboard template
 
+<code-example 
+  path="toh-pt5/src/app/heroes/heroes.component.html" 
+  region="list" 
+  title="src/app/heroes/heroes.component.html (list with links)">
+</code-example>
+
+You'll have to fix the private stylesheet (`heroes.component.css`) to make
+the list look as it did before.
+Revised styles are in the [final code review](#heroescomponent) at the bottom of this guide.
+
+#### Remove dead code (optional)
+
+While the `HeroesComponent` class still works, 
+the `onSelect()` method and `selectedHero` property are no longer used.
+
+It's nice to tidy up and you'll be grateful to yourself later.
+Here's the class after pruning away the dead code.
+
+<code-example 
+  path="toh-pt5/src/app/heroes/heroes.component.ts"
+  region="class" 
+  title="src/app/heroes/heroes.component.ts (cleaned up)" linenums="false">
+</code-example>
+
+## Routable *HeroDetailComponent*
+
+Previously, the parent `HeroesComponent` set the `HeroDetailComponent.hero`
+property and the `HeroDetailComponent` displayed the hero.
+
+`HeroesComponent` doesn't do that anymore.
+Now the router creates the `HeroDetailComponent` in response to a URL such as `~/detail/11`.
+
+The `HeroDetailComponent` needs a new way to obtain the _hero-to-display_.
+
+* Get the route that created it, 
+* Extract the `id` from the route
+* Acquire the hero with that `id` from the server via the `HeroService`
 
 Add the following imports:
 
-
-<code-example path="toh-pt5/src/app/hero-detail.component.1.ts" region="added-imports" title="src/app/hero-detail.component.ts">
-
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" 
+  region="added-imports" 
+  title="src/app/hero-detail/hero-detail.component.ts">
 </code-example>
 
-
+{@a hero-detail-ctor}
 
 Inject the `ActivatedRoute`, `HeroService`, and `Location` services
 into the constructor, saving their values in private fields:
 
-
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ctor" title="src/app/hero-detail.component.ts (constructor)">
-
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="ctor">
 </code-example>
 
+The [`ActivatedRoute`](api/router/ActivatedRoute) holds information about the route to this instance of the `HeroDetailComponent`.
+This component is interested in the route's bag of parameters extracted from the URL.
+The _"id"_ parameter is the `id` of the hero to display.
 
+The [`HeroService`](tutorial/toh-pt4) gets hero data from the remote server
+and this component will use it to get the _hero-to-display_.
 
-Import the `switchMap` operator to use later with the route parameters `Observable`.
+The [`location`](api/common/Location) is an Angular service for interacting with the browser.
+You'll use it [later](#goback) to navigate back to the view that navigated here.
 
+### Extract the _id_ route parameter
 
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="rxjs-import" title="src/app/hero-detail.component.ts (switchMap import)">
+In the `ngOnInit()` [lifecycle hook](guide/lifecycle-hooks#oninit)
+call `getHero()` and define it as follows.
 
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="ngOnInit">
 </code-example>
 
+The `route.snapshot` is a static image of the route information shortly after the component was created.
 
+The `paramMap` is a dictionary of route parameter values extracted from the URL.
+The `"id"` key returns the `id` of the hero to fetch.
 
-Tell the class to implement the `OnInit` interface.
-
-
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="implement" title="src/app/hero-detail.component.ts">
-
-</code-example>
-
-
-
-Inside the `ngOnInit()` lifecycle hook, use the `paramMap` Observable to
-extract the `id` parameter value from the `ActivatedRoute` service
-and use the `HeroService` to fetch the hero with that `id`.
-
-
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ngOnInit" title="src/app/hero-detail.component.ts">
-
-</code-example>
-
-
-
-The `switchMap` operator maps the `id` in the Observable route parameters
-to a new `Observable`, the result of the `HeroService.getHero()` method.
-
-If a user re-navigates to this component while a `getHero` request is still processing,
-`switchMap` cancels the old request and then calls `HeroService.getHero()` again.
-
-
-The hero `id` is a number. Route parameters are always strings.
-So the route parameter value is converted to a number with the JavaScript (+) operator.
-
-
-<div class="l-sub-section">
-
-
-
-### Do you need to unsubscribe?
-
-As described in the [ActivatedRoute: the one-stop-shop for route information](guide/router#activated-route)
-section of the [Routing & Navigation](guide/router) page,
-the `Router` manages the observables it provides and localizes
-the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
-memory leaks, so you don't need to unsubscribe from the route `paramMap` `Observable`.
-
-
-</div>
-
+Route parameters are always strings.
+The JavaScript (+) operator converts the string to a number,
+which is what a hero `id` should be.
 
+The browser refreshes and the app crashes with a compiler error.
+`HeroService` doesn't have a `getHero()` method.
+Add it now.
 
 ### Add *HeroService.getHero()*
 
-In the previous code snippet, `HeroService` doesn't have a `getHero()` method. To fix this issue,
-open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`.
-
-
-<code-example path="toh-pt5/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts (getHero)">
+Open `HeroService` and add this `getHero()` method
 
+<code-example 
+  path="toh-pt5/src/app/hero.service.ts" 
+  region="getHero" 
+  title="src/app/hero.service.ts (getHero)">
 </code-example>
 
+<div class="alert is-important">
 
+Note the backticks ( &#96; ) that 
+define a JavaScript 
+[_template literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for embedding the `id`.
+</div>
+
+Like [`getHeroes()`](tutorial/toh-pt4#observable-heroservice),
+`getHero()` has an asynchronous signature.
+It returns a _mock hero_ as an `Observable`, using the RxJS `of()` function.
+
+You'll be able to re-implement `getHero()` as a real `Http` request
+without having to change the `HeroDetailComponent` that calls it.
+
+#### Try it
+
+The browser refreshes and the app is working again.
+You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
+
+If you paste `localhost:4200/detail/11` in the browser address bar,
+the router navigates to the detail view for the hero with `id: 11`,  "Mr. Nice".
+
+{@a goback}
 
 ### Find the way back
 
-Users have several ways to navigate *to* the `HeroDetailComponent`.
+By clicking the browser's back button, 
+you can go back to the hero list or dashboard view,
+depending upon which sent you to the detail view.
 
-To navigate somewhere else, users can click one of the two links in the `AppComponent` or click the browser's back button.
-Now add a third option, a `goBack()` method that navigates backward one step in the browser's history stack
-using the `Location` service you injected previously.
+It would be nice to have a button on the `HeroDetail` view that can do that.
 
+Add a *go back* button to the bottom of the component template and bind it
+to the component's `goBack()` method.
 
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="goBack" title="src/app/hero-detail.component.ts (goBack)">
-
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.html" 
+  region="back-button"
+  title="src/app/hero-detail/hero-detail.component.html (back button)">
 </code-example>
 
+Add a `goBack()` _method_ to the component class that navigates backward one step 
+in the browser's history stack
+using the `Location` service that you [injected previously](#hero-detail-ctor).
 
-
-<div class="l-sub-section">
-
-
-
-Going back too far could take users out of the app.
-In a real app, you can prevent this issue with the <em>CanDeactivate</em> guard.
-Read more on the [CanDeactivate](api/router/CanDeactivate) page.
-
-
-</div>
-
-
-
-You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
-
-
-<code-example path="toh-pt5/src/app/hero-detail.component.html" region="back-button">
+<code-example path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="goBack" title="src/app/hero-detail/hero-detail.component.ts (goBack)">
 
 </code-example>
 
 
-
-Migrate the template to its own file
-called <code>hero-detail.component.html</code>:
-
-
-<code-example path="toh-pt5/src/app/hero-detail.component.html" title="src/app/hero-detail.component.html">
-
-</code-example>
-
-
-
-Update the component metadata with a `templateUrl` pointing to the template file that you just created.
-
-
-
-<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (metadata)">
-
-</code-example>
-
-
-
-Refresh the browser and see the results.
-
-
-
-## Select a dashboard hero
-
-When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
-
-Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
-When hovering over a hero block, the target URL should display in the browser status bar
-and the user should be able to copy the link or open the hero detail view in a new tab.
-
-To achieve this effect, reopen `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
-with `<a>` tags. Change the opening `<a>` tag to the following:
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.html" region="click" title="src/app/dashboard.component.html (repeated &lt;a&gt; tag)">
-
-</code-example>
-
-
-
-Notice the `[routerLink]` binding.
-As described in the [Router links](tutorial/toh-pt5#router-links) section of this page,
-top-level navigation in the `AppComponent` template has router links set to fixed paths of the
-destination routes, "/dashboard" and "/heroes".
-
-This time, you're binding to an expression containing a *link parameters array*.
-The array has two elements: the *path* of
-the destination route and a *route parameter* set to the value of the current hero's `id`.
-
-The two array items align with the *path* and *:id*
-token in the parameterized hero detail route definition that you added to
-`app.module.ts` earlier:
-
-
-<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
-
-</code-example>
-
-
-
-Refresh the browser and select a hero from the dashboard; the app navigates to that hero’s details.
-
-
-
-## Refactor routes to a _Routing Module_
-
-Almost 20 lines of `AppModule` are devoted to configuring four routes.
-Most applications have many more routes and they add guard services
-to protect against unwanted or unauthorized navigations.
-(Read more about guard services in the [Route Guards](guide/router#guards)
-section of the [Routing & Navigation](guide/router) page.)
-Routing considerations could quickly dominate this module and obscure its primary purpose, which is to
-establish key facts about the entire app for the Angular compiler.
-
-It's a good idea to refactor the routing configuration into its own class.
-The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders`,
-a class dedicated to routing should be a *routing module*.
-For more information, see the [Milestone #2: The Routing Module](guide/router#routing-module)
-section of the [Routing & Navigation](guide/router) page.
-
-By convention, a routing module name contains the word "Routing" and
-aligns with the name of the module that declares the components navigated to.
-
-Create an `app-routing.module.ts` file as a sibling to `app.module.ts`.
-Give it the following contents, extracted from the `AppModule` class:
-
-
-<code-example path="toh-pt5/src/app/app-routing.module.ts" title="src/app/app-routing.module.ts">
-
-</code-example>
-
-
-
-The following points are typical of routing modules:
-
-* The Routing Module pulls the routes into a variable. The variable clarifies the
-  routing module pattern in case you export the module in the future.
-* The Routing Module adds `RouterModule.forRoot(routes)` to `imports`.
-* The Routing Module adds `RouterModule` to `exports` so that the
-components in the companion module have access to Router declarables,
-such as `RouterLink` and `RouterOutlet`.
-* There are no `declarations`.  Declarations are the responsibility of the companion module.
-* If you have guard services, the Routing Module adds module `providers`. (There are none in this example.)
-
-### Update *AppModule*
-
-Delete the routing configuration from `AppModule` and import the `AppRoutingModule`.
-Use an ES2015 `import` statement *and* add it to the `NgModule.imports` list.
-
-Here is the revised `AppModule`, compared to its pre-refactor state:
-
-<code-tabs>
-  <code-pane path="toh-pt5/src/app/app.module.ts" title="src/app/app.module.ts (after)"></code-pane>
-  <code-pane path="toh-pt5/src/app/app.module.3.ts" title="src/app/app.module.ts (before)"></code-pane>
-</code-tabs>
-
-The revised and simplified `AppModule` is focused on identifying the key pieces of the app.
-
-## Select a hero in the *HeroesComponent*
-
-In the `HeroesComponent`,
-the current template exhibits a "master/detail" style with the list of heroes
-at the top and details of the selected hero below.
-
-
-<code-example path="toh-pt4/src/app/app.component.ts" region="template" title="src/app/heroes.component.ts (current template)" linenums="false">
-
-</code-example>
-
-
-
-Delete the `<h1>` at the top.
-
-Delete the last line of the template with the `<hero-detail>` tags.
-
-You'll no longer show the full `HeroDetailComponent` here.
-Instead, you'll display the hero detail on its own page and route to it as you did in the dashboard.
-
-However, when users select a hero from the list, they won't go to the detail page.
-Instead, they'll see a mini detail on *this* page and have to click a button to navigate to the *full detail* page.
-
-### Add the *mini detail*
-
-Add the following HTML fragment at the bottom of the template where the `<hero-detail>` used to be:
-
-
-<code-example path="toh-pt5/src/app/heroes.component.html" region="mini-detail" title="src/app/heroes.component.ts">
-
-</code-example>
-
-
-
-After clicking a hero, users should see something like this below the hero list:
-
-
-<figure>
-  <img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail">
-</figure>
-
-
-
-### Format with the uppercase pipe
-
-The hero's name is displayed in capital letters because of the `uppercase` pipe
-that's included in the interpolation binding, right after the pipe operator ( | ).
-
-
-<code-example path="toh-pt5/src/app/heroes.component.html" region="pipe">
-
-</code-example>
-
-
-
-Pipes are a good way to format strings, currency amounts, dates and other display data.
-Angular ships with several pipes and you can write your own.
-
-
-<div class="l-sub-section">
-
-
-
-Read more about pipes on the [Pipes](guide/pipes) page.
-
-
-</div>
-
-
-
-### Move content out of the component file
-
-You still have to update the component class to support navigation to the
-`HeroDetailComponent` when users click the *View Details* button.
-
-The component file is big.
-It's difficult to find the component logic amidst the noise of HTML and CSS.
-
-Before making any more changes, migrate the template and styles to their own files.
-
-First, move the template contents from `heroes.component.ts`
-into a new <code>heroes.component.html</code> file.
-Don't copy the backticks. As for `heroes.component.ts`, you'll
-come back to it in a minute. Next, move the
-styles contents into a new <code>heroes.component.css</code> file.
-
-The two new files should look like this:
-
-
-<code-tabs>
-
-  <code-pane title="src/app/heroes.component.html" path="toh-pt5/src/app/heroes.component.html">
-
-  </code-pane>
-
-  <code-pane title="src/app/heroes.component.css" path="toh-pt5/src/app/heroes.component.css">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-Now, back in the component metadata for `heroes.component.ts`,
-delete `template` and `styles`, replacing them with
-`templateUrl` and `styleUrls` respectively.
-Set their properties to refer to the new files.
-
-
-<code-example path="toh-pt5/src/app/heroes.component.ts" region="metadata" title="src/app/heroes.component.ts (revised metadata)">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-The `styleUrls` property is an array of style file names (with paths).
-You could list multiple style files from different locations if you needed them.
-
-
-</div>
-
-
-
-### Update the _HeroesComponent_ class
-
-The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click.
-The button's click event is bound to a `gotoDetail()` method that navigates _imperatively_
-by telling the router where to go.
-
-This approach requires the following changes to the component class:
-
-1. Import the `Router` from the Angular router library.
-1. Inject the `Router` in the constructor, along with the `HeroService`.
-1. Implement `gotoDetail()` by calling the router `navigate()` method.
-
-
-<code-example path="toh-pt5/src/app/heroes.component.ts" region="gotoDetail" title="src/app/heroes.component.ts (gotoDetail)">
-
-</code-example>
-
-
-
-Note that you're passing a two-element *link parameters array*&mdash;a
-path and the route parameter&mdash;to
-the router `navigate()` method, just as you did in the `[routerLink]` binding
-back in the `DashboardComponent`.
-Here's the revised `HeroesComponent` class:
-
-
-<code-example path="toh-pt5/src/app/heroes.component.ts" region="class" title="src/app/heroes.component.ts (class)">
-
-</code-example>
-
-
-
 Refresh the browser and start clicking.
 Users can navigate around the app, from the dashboard to hero details and back,
 from heroes list to the mini detail to the hero details and back to the heroes again.
 
 You've met all of the navigational requirements that propelled this page.
 
+## Final code review
 
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
 
-## Style the app
-
-The app is functional but it needs styling.
-The dashboard heroes should display in a row of rectangles.
-You've received around 60 lines of CSS for this purpose, including some simple media queries for responsive design.
-
-As you now know, adding the CSS to the component `styles` metadata
-would obscure the component logic.
-Instead, edit the CSS in a separate `*.css` file.
-
-Add a <code>dashboard.component.css</code> file to the `app` folder and reference
-that file in the component metadata's `styleUrls` array property like this:
-
-
-<code-example path="toh-pt5/src/app/dashboard.component.ts" region="css" title="src/app/dashboard.component.ts (styleUrls)">
-
-</code-example>
-
-
-
-### Add stylish hero details
-
-You've also been provided with CSS styles specifically for the `HeroDetailComponent`.
-
-Add a <code>hero-detail.component.css</code> to the `app`
-folder and refer to that file inside
-the `styleUrls` array as you did for `DashboardComponent`.
-Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` decorator
-and its import.
-
-Here's the content for the component CSS files.
-
+{@a approutingmodule}
+{@a appmodule}
+#### _AppRoutingModule_ and _AppModule_
 
 <code-tabs>
-
-  <code-pane title="src/app/hero-detail.component.css" path="toh-pt5/src/app/hero-detail.component.css">
-
+  <code-pane 
+    title="src/app/app-routing.module.ts" 
+    path="toh-pt5/src/app/app-routing.module.ts">
   </code-pane>
-
-  <code-pane title="src/app/dashboard.component.css" path="toh-pt5/src/app/dashboard.component.css">
-
+  <code-pane 
+    title="src/app/app.module.ts" 
+    path="toh-pt5/src/app/app.module.ts">
   </code-pane>
-
 </code-tabs>
 
-
-
-### Style the navigation links
-
-The provided CSS makes the navigation links in the `AppComponent` look more like selectable buttons.
-You'll surround those links in `<nav>` tags.
-
-Add an <code>app.component.css</code> file to the `app` folder with the following content.
-
-
-<code-example path="toh-pt5/src/app/app.component.css" title="src/app/app.component.css (navigation styles)">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-**The *routerLinkActive* directive**
-
-The Angular router provides a `routerLinkActive` directive you can use to
-add a class to the HTML navigation element whose route matches the active route.
-All you have to do is define the style for it.
-
-
-</div>
-
-
-
-<code-example path="toh-pt5/src/app/app.component.ts" region="template" title="src/app/app.component.ts (active router links)">
-
-</code-example>
-
-
-
-Add a `styleUrls` property that refers to this CSS file as follows:
-
-
-<code-example path="toh-pt5/src/app/app.component.ts" region="styleUrls" title="src/app/app.component.ts">
-
-</code-example>
-
-
-
-### Global application styles
-
-When you add styles to a component, you keep everything a component needs&mdash;HTML,
-the CSS, the code&mdash;together in one convenient place.
-It's easy to package it all up and re-use the component somewhere else.
-
-You can also create styles at the *application level* outside of any component.
-
-The designers provided some basic styles to apply to elements across the entire app.
-These correspond to the full set of master styles that you installed earlier during [setup](guide/setup).
-Here's an excerpt:
-
-
-<code-example path="toh-pt5/src/styles.1.css" title="src/styles.css (excerpt)">
-
-</code-example>
-
-
-
-Create the file <code>styles.css</code>.
-Ensure that the file contains the [master styles provided here](https://raw.githubusercontent.com/angular/angular/master/aio/tools/examples/shared/boilerplate/common/src/styles.css).
-
-
-
-
-Look at the app now. The dashboard, heroes, and navigation links are styled.
-
-
-<figure>
-  <img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="View navigations">
-</figure>
-
-
-
-
-## Application structure and code
-
-Review the sample source code in the <live-example></live-example> for this page.
-Verify that you have the following structure:
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.css
-        </div>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          app-routing.module.ts
-        </div>
-
-        <div class='file'>
-          dashboard.component.css
-        </div>
-
-        <div class='file'>
-          dashboard.component.html
-        </div>
-
-        <div class='file'>
-          dashboard.component.ts
-        </div>
-
-        <div class='file'>
-          hero.service.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.css
-        </div>
-
-        <div class='file'>
-          hero-detail.component.html
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-        <div class='file'>
-          heroes.component.css
-        </div>
-
-        <div class='file'>
-          heroes.component.html
-        </div>
-
-        <div class='file'>
-          heroes.component.ts
-        </div>
-
-        <div class='file'>
-          mock-heroes.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
+{@a appcomponent}
+#### _AppComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/app.component.html"
+    path="toh-pt5/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/app.component.css"
+    path="toh-pt5/src/app/app.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a dashboardcomponent}
+#### _DashboardComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.html" path="toh-pt5/src/app/dashboard/dashboard.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.ts" path="toh-pt5/src/app/dashboard/dashboard.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.css" path="toh-pt5/src/app/dashboard/dashboard.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a heroescomponent}
+#### _HeroesComponent_
+<code-tabs>
+  <code-pane 
+    title="src/app/heroes/heroes.component.html" path="toh-pt5/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/heroes/heroes.component.ts" 
+    path="toh-pt5/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/heroes/heroes.component.css" 
+    path="toh-pt5/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a herodetailcomponent}
+#### _HeroDetailComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.html" path="toh-pt5/src/app/hero-detail/hero-detail.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.ts" path="toh-pt5/src/app/hero-detail/hero-detail.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.css" path="toh-pt5/src/app/hero-detail/hero-detail.component.css">
+  </code-pane>
+</code-tabs>
 
 ## Summary
-Here's what you achieved in this page:
 
 * You added the Angular router to navigate among different components.
-* You learned how to create router links to represent navigation menu items.
-* You used router link parameters to navigate to the details of the user-selected hero.
+* You turned the `AppComponent` into a navigation shell with a links and a `<router-outlet>`.
+* You configured the router in an `AppRoutingModule` 
+* You defined simple routes, a redirect route, and a parameterized route.
+* You used the `routerLink` directive in anchor elements.
+* You refactored a tightly-coupled master/detail view into a routed detail view.
+* You used router link parameters to navigate to the detail view of a user-selected hero.
 * You shared the `HeroService` among multiple components.
-* You moved HTML and CSS out of the component file and into their own files.
-* You added the `uppercase` pipe to format data.
-
-Your app should look like this <live-example></live-example>.
-
-### Next step
-
-You have much of the foundation you need to build an app.
-You're still missing a key piece: remote data access.
-
-In the [next tutorial page](tutorial/toh-pt6 "Http")
-you’ll replace the mock data with data retrieved from a server using http.
diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md
index 72852a15aa..aa65f928f1 100644
--- a/aio/content/tutorial/toh-pt6.md
+++ b/aio/content/tutorial/toh-pt6.md
@@ -1,522 +1,644 @@
 # HTTP
 
-In this page, you'll make the following improvements.
+In this tutorial, you'll add the following data persistence features with help from
+Angular's `HttpClient`.
 
-* Get the hero data from a server.
-* Let users add, edit, and delete hero names.
-* Save the changes to the server.
-
-You'll teach the app to make corresponding HTTP calls to a remote server's web API.
+* The `HeroService` gets hero data with HTTP requests.
+* Users can add, edit, and delete heroes and save these changes over HTTP.
+* Users can search for heroes by name.
 
 When you're done with this page, the app should look like this <live-example></live-example>.
 
-## Where you left off
+## Enable HTTP services
 
-In the [previous page](tutorial/toh-pt5), you learned to navigate between the dashboard and the fixed heroes list,
-editing a selected hero along the way.
-That's the starting point for this page.
+`HttpClient` is Angular's mechanism for communicating with a remote server over HTTP. 
 
-## Keep the app transpiling and running
-Enter the following command in the terminal window:
+To make `HttpClient` available everywhere in the app,
+
+* open the root `AppModule`, 
+* import the `HttpClientModule` symbol from `@angular/common/http`,
+* add it to the `@NgModule.imports` array.
+
+## Simulate a data server
+
+This tutorial sample _mimics_ communication with a remote data server by using the
+[_In-memory Web API_](https://github.com/angular/in-memory-web-api "In-memory Web API") module.
+
+After installing the module, the app will make requests to and receive responses from the `HttpClient`
+without knowing that the *In-memory Web API* is intercepting those requests,
+applying them to an in-memory data store, and returning simulated responses.
+
+This facility is a great convenience for the tutorial.
+You won't have to set up a server to learn about `HttpClient`.
+
+It may also be convenient in the early stages of your own app development when
+the server's web api is ill-defined or not yet implemented.
+
+<div class="alert is-important">
+
+**Important:** the *In-memory Web API* module has nothing to do with HTTP in Angular.
+
+If you're just _reading_ this tutorial to learn about `HttpClient`, you can [skip over](#import-heroes) this step.
+If you're _coding along_ with this tutorial, stay here and add the *In-memory Web API* now.
+
+</div>
+
+Install the *In-memory Web API* package from _npm_
 
 <code-example language="sh" class="code-shell">
-  npm start
+  npm install angular-in-memory-web-api --save
 </code-example>
 
-This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
+Import the `InMemoryWebApiModule` and the `InMemoryDataService` class, 
+which you will create in a moment.
 
-You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
+<code-example 
+  path="toh-pt6/src/app/app.module.ts" 
+  region="import-in-mem-stuff" 
+  title="src/app/app.module.ts (In-memory Web API imports)">
+</code-example>
 
-## Providing HTTP Services
+Add the `InMemoryWebApiModule` to the `@NgModule.imports` array&mdash;
+_after importing the `HttpClient`_,
+&mdash;while configuring it with the `InMemoryDataService`.
 
-The `HttpModule` is not a core NgModule.
-`HttpModule` is Angular's optional approach to web access. It exists as a separate add-on module called `@angular/http`
-and is shipped in a separate script file as part of the Angular npm package.
-
-You're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when you need it.
-
-## Register for HTTP services
-
-The app will depend on the Angular `http` service, which itself depends on other supporting services.
-The `HttpModule` from the `@angular/http` library holds providers for a complete set of HTTP services.
-
-To allow access to these services from anywhere in the app,
-add `HttpModule` to the `imports` list of the `AppModule`.
-
-<code-example path="toh-pt6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)"></code-example>
-
-Notice that you also supply `HttpModule` as part of the *imports* array in root NgModule `AppModule`.
-
-## Simulate the web API
-
-We recommend registering app-wide services in the root
-`AppModule` *providers*.
-
-Until you have a web server that can handle requests for hero data,
-the HTTP client will fetch and save data from
-a mock service, the *in-memory web API*.
-
-Update <code>src/app/app.module.ts</code> with this version, which uses the mock service:
-
-<code-example path="toh-pt6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)"></code-example>
-
-Rather than require a real API server, this example simulates communication with the remote server by adding the
-<a href="https://github.com/angular/in-memory-web-api" title="In-memory Web API">InMemoryWebApiModule</a>
-to the module `imports`, effectively  replacing the `Http` client's XHR backend service with an in-memory alternative.
-
-<code-example path="toh-pt6/src/app/app.module.ts" region="in-mem-web-api"></code-example>
+<code-example   
+  path="toh-pt6/src/app/app.module.ts" 
+  region="in-mem-web-api-imports">
+</code-example>
 
 The `forRoot()` configuration method takes an `InMemoryDataService` class
 that primes the in-memory database.
-Add the file `in-memory-data.service.ts` in `app` with the following content:
+
+The _Tour of Heroes_ sample creates such a class 
+`src/app/in-memory-data.service.ts` which has the following content:
 
 <code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false"></code-example>
 
 This file replaces `mock-heroes.ts`, which is now safe to delete.
-Added hero "Zero" to confirm that the data service can handle a hero with `id==0`.
 
+When your server is ready, detach the *In-memory Web API*, and the app's requests will go through to the server.
 
-<div class="alert is-helpful">
-
-  The in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
-  Don't worry about the details of this backend substitution; you can
-  skip it when you have a real web API server.
-
-</div>
+Now back to the `HttpClient` story.
 
+{@a import-heroes}
 ## Heroes and HTTP
 
-In the current `HeroService` implementation, a Promise resolved with mock heroes is returned.
+Import some HTTP symbols that you'll need:
 
-<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (old getHeroes)"></code-example>
+<code-example
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="import-httpclient" 
+  title="src/app/hero.service.ts (import HTTP symbols)">
+</code-example>
 
-This was implemented in anticipation of ultimately
-fetching heroes with an HTTP client, which must be an asynchronous operation.
+Inject `HttpClient` into the constructor in a private property called `http`.
 
-Now convert `getHeroes()` to use HTTP.
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="ctor" >
+</code-example>
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)"></code-example>
+Keep injecting the `MessageService`. You'll call it so frequently that
+you'll wrap it in private `log` method.
 
-Update the import statements as follows:
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="log" >
+</code-example>
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)"></code-example>
+Define the `heroesUrl` with the address of the heroes resource on the server.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="heroesUrl" >
+</code-example>
+
+### Get heroes with _HttpClient_
+
+The current `HeroService.getHeroes()` 
+uses the RxJS `of()` function to return an array of mock heroes
+as an `Observable<Hero[]>`.
+
+<code-example 
+  path="toh-pt4/src/app/hero.service.ts" 
+  region="getHeroes-1" 
+  title="src/app/hero.service.ts (getHeroes with RxJs 'of()')">
+</code-example>
+
+Convert that method to use `HttpClient`
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes-1">
+</code-example>
 
 Refresh the browser. The hero data should successfully load from the
 mock server.
 
-{@a http-promise}
+You've swapped `http.get` for `of` and the app keeps working without any other changes
+because both functions return an `Observable<Hero[]>`.
 
-### HTTP Promise
+### Http methods return one value
 
-The Angular `http.get` returns an RxJS `Observable`.
-*Observables* are a powerful way to manage asynchronous data flows.
-You'll read about [Observables](tutorial/toh-pt6#observables) later in this page.
+All `HttpClient` methods return an RxJS `Observable` of something.
 
-For now, you've converted the `Observable` to a `Promise` using the `toPromise` operator.
+HTTP is a request/response protocol. 
+You make a request, it returns a single response.
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="to-promise"></code-example>
+In general, an `Observable` _can_ return multiple values over time.
+An `Observable` from `HttpClient` always emits a single value and then completes, never to emit again.
 
-The Angular `Observable` doesn't have a `toPromise` operator out of the box.
+This particular `HttpClient.get` call returns an `Observable<Hero[]>`, literally "_an observable of hero arrays_". In practice, it will only return a single hero array.
 
-There are many operators like `toPromise` that extend `Observable` with useful capabilities.
-To use those capabilities, you have to add the operators themselves.
-That's as easy as importing them from the RxJS library like this:
+### _HttpClient.get_ returns response data
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="rxjs"></code-example>
+`HttpClient.get` returns the _body_ of the response as an untyped JSON object by default.
+Applying the optional type specifier, `<Hero[]>` , gives you a typed result object.
 
+The shape of the JSON data is determined by the server's data API.
+The _Tour of Heroes_ data API returns the hero data as an array.
 
 <div class="l-sub-section">
 
-  You'll add more operators, and learn why you must do so, [later in this tutorial](tutorial/toh-pt6#rxjs-imports).
+Other APIs may bury the data that you want within an object.
+You might have to dig that data out by processing the `Observable` result
+with the RxJS `map` operator.
+
+Although not discussed here, there's an example of `map` in the `getHeroNo404()`
+method included in the sample source code.
 
 </div>
 
+### Error handling
 
-### Extracting the data in the *then* callback
+Things go wrong, especially when you're getting data from a remote server.
+The `HeroService.getHeroes()` method should catch errors and do something appropriate.
 
-In the *Promise*'s `then()` callback, you call the `json` method of the HTTP `Response` to extract the
-data within the response.
+To catch errors, you **"pipe" the observable** result from `http.get()` through an RxJS `catchError()` operator.
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="to-data"></code-example>
+Import the `catchError` symbol from `rxjs/operators`, along with some other operators you'll need later.
 
-The response JSON has a single `data` property, which
-holds the array of heroes that the caller wants.
-So you grab that array and return it as the resolved Promise value.
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="import-rxjs-operators">
+</code-example>
 
+Now extend the observable result with the `.pipe()` method and
+give it a `catchError()` operator.
 
-<div class="alert is-important">
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes-2" >
+</code-example>
 
-  Note the shape of the data that the server returns.
-  This particular in-memory web API example returns an object with a `data` property.
-  Your API might return something else. Adjust the code to match your web API.
+The `catchError()` operator intercepts an **`Observable that failed**.
+It passes the error an _error handler_ that can do what it wants with the error.
 
-</div>
+The following `handleError()` method reports the error and then returns an
+innocuous result so that the application keeps working.
 
+#### _handleError_
 
-The caller is unaware that you fetched the heroes from the (mock) server.
-It receives a Promise of *heroes* just as it did before.
+The following `errorHandler()` will be shared by many `HeroService` methods
+so it's generalized to meet their different needs.
 
-### Error Handling
+Instead of handling the error directly, it returns an _error handler_ function to `catchError` that it 
+has configured with both the name of the operation that failed and a safe return value.
 
-At the end of `getHeroes()`, you `catch` server failures and pass them to an error handler.
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="handleError">
+</code-example>
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="catch"></code-example>
+After reporting the error to console, the handler constructs
+a user friendly message and returns a safe value to the app so it can keep working.
 
-This is a critical step.
-You must anticipate HTTP failures, as they happen frequently for reasons beyond your control.
+Because each service method returns a different kind of `Observable` result,
+`errorHandler()` takes a type parameter so it can return the safe value as the type that the app expects.
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="handleError"></code-example>
+### Tap into the _Observable_
 
-This demo service logs the error to the console; in real life,
-you would handle the error in code. For a demo, this works.
+The `HeroService` methods will **tap** into the flow of observable values
+and send a message (via `log()`) to the message area at the bottom of the page.
 
-The code also includes an error to
-the caller in a rejected promise, so that the caller can display a proper error message to the user.
+They'll do that with the RxJS `tap` operator,
+which _looks_ at the observable values, does _something_ with those values,
+and passes them along.
+The `tap` call back doesn't touch the values themselves.
+
+Here is the final version of `getHeroes` with the `tap` that logs the operation.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes" >
+</code-example>
 
 ### Get hero by id
 
-When the `HeroDetailComponent` asks the `HeroService` to fetch a hero,
-the `HeroService` currently fetches all heroes and
-filters for the one with the matching `id`.
-That's fine for a simulation, but it's wasteful to ask a real server for all heroes when you only want one.
-Most web APIs support a _get-by-id_ request in the form `api/hero/:id` (such as `api/hero/11`).
-
-Update the `HeroService.getHero()` method to make a _get-by-id_ request:
+Most web APIs support a _get by id_ request in the form `api/hero/:id` 
+(such as `api/hero/11`).
+Add a `HeroService.getHero()` method to make that request:
 
 <code-example path="toh-pt6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts"></code-example>
 
-This request is almost the same as `getHeroes()`.
-The hero id in the URL identifies which hero the server should update.
+There are three significant differences from  `getHeroes()`.
 
-Also, the `data` in the response is a single hero object rather than an array.
+* it constructs a request URL with the desired hero's id.
+* the server should respond with a single hero rather than an array of heroes.
+* therefore, `getHero` returns an `Observable<Hero>` ("_an observable of Hero objects_")
+ rather than an observable of hero _arrays_ .
 
-### Unchanged _getHeroes_ API
+## Update heroes
 
-Although you made significant internal changes to `getHeroes()` and `getHero()`,
-the public signatures didn't change.
-You still return a Promise from both methods.
-You won't have to update any of the components that call them.
+Editing a hero's name in the _hero detail_ view.
+As you type, the hero name updates the heading at the top of the page.
+But when you click the "go back button", the changes are lost.
 
-Now it's time to add the ability to create and delete heroes.
-
-## Updating hero details
-
-Try editing a hero's name in the hero detail view.
-As you type, the hero name is updated in the view heading.
-But if you click the Back button, the changes are lost.
-
-Updates weren't lost before. What changed?
-When the app used a list of mock heroes, updates were applied directly to the
-hero objects within the single, app-wide, shared list. Now that you're fetching data
-from a server, if you want changes to persist, you must write them back to
+If you want changes to persist, you must write them back to
 the server.
 
-### Add the ability to save hero details
-
 At the end of the hero detail template, add a save button with a `click` event
 binding that invokes a new component method named `save()`.
 
-<code-example path="toh-pt6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)"></code-example>
+<code-example path="toh-pt6/src/app/hero-detail/hero-detail.component.html" region="save" title="src/app/hero-detail/hero-detail.component.html (save)"></code-example>
 
 Add the following `save()` method, which persists hero name changes using the hero service
-`update()` method and then navigates back to the previous view.
+`updateHero()` method and then navigates back to the previous view.
 
-<code-example path="toh-pt6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)"></code-example>
+<code-example path="toh-pt6/src/app/hero-detail/hero-detail.component.ts" region="save" title="src/app/hero-detail/hero-detail.component.ts (save)"></code-example>
 
-### Add a hero service _update()_ method
+#### Add _HeroService.updateHero()_
 
-The overall structure of the `update()` method is similar to that of
-`getHeroes()`, but it uses an HTTP `put()` to persist server-side changes.
+The overall structure of the `updateHero()` method is similar to that of
+`getHeroes()`, but it uses `http.put()` to persist the changed hero
+on the server.
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)"></code-example>
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="updateHero" 
+  title="src/app/hero.service.ts (update)">
+</code-example>
 
-To identify which hero the server should update, the hero `id` is encoded in
-the URL. The `put()` body is the JSON string encoding of the hero, obtained by
-calling `JSON.stringify`. The body content type
-(`application/json`) is identified in the request header.
+The `HttpClient.put()` method takes three parameters
+* the URL
+* the data to update (the modified hero in this case)
+* options
+
+The URL is unchanged. The heroes web API knows which hero to update by looking at the hero's `id`.
+
+The heroes web API expects a special header in HTTP save requests.
+That header is in the `httpOption` constant defined in the `HeroService`.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="http-options">
+</code-example>
 
 Refresh the browser, change a hero name, save your change,
-and click the browser Back button. Changes should now persist.
+and click the "go back" button. 
+The hero now appears in the list with the changed name.
 
-## Add the ability to add heroes
+## Add a new hero
 
-To add a hero, the app needs the hero's name. You can use an `input`
+To add a hero, this app only needs the hero's name. You can use an `input`
 element paired with an add button.
 
-Insert the following into the heroes component HTML, just after
+Insert the following into the `HeroesComponent` template, just after
 the heading:
 
-<code-example path="toh-pt6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)"></code-example>
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="add" title="src/app/heroes/heroes.component.html (add)"></code-example>
 
 In response to a click event, call the component's click handler and then
 clear the input field so that it's ready for another name.
 
-<code-example path="toh-pt6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)"></code-example>
+<code-example path="toh-pt6/src/app/heroes/heroes.component.ts" region="add" title="src/app/heroes/heroes.component.ts (add)"></code-example>
 
-When the given name is non-blank, the handler delegates creation of the
-named hero to the hero service, and then adds the new hero to the array.
+When the given name is non-blank, the handler creates a `Hero`-like object
+from the name (it's only missing the `id`) and passes it to the services `addHero()` method.
 
-Implement the `create()` method in the `HeroService` class.
+When `addHero` saves successfully, the `subscribe` callback
+receives the new hero and pushes it into to the `heroes` list for display.
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="create" title="src/app/hero.service.ts (create)"></code-example>
+You'll write `HeroService.addHero` in the next section.
 
-Refresh the browser and create some heroes.
+#### Add _HeroService.addHero()_
 
-## Add the ability to delete a hero
+Add the following `addHero()` method to the `HeroService` class.
 
-Each hero in the heroes view should have a delete button.
+<code-example path="toh-pt6/src/app/hero.service.ts" region="addHero" title="src/app/hero.service.ts (addHero)"></code-example>
 
-Add the following button element to the heroes component HTML, after the hero
+`HeroService.addHero()` differs from `updateHero` in two ways.
+
+* it calls `HttpClient.post()` instead of `put()`.
+* it expects the server to generates an id for the new hero, 
+which it returns in the `Observable<Hero>` to the caller.
+
+Refresh the browser and add some heroes.
+
+## Delete a hero
+
+Each hero in the heroes list should have a delete button.
+
+Add the following button element to the `HeroesComponent` template, after the hero
 name in the repeated `<li>` element.
 
-<code-example path="toh-pt6/src/app/heroes.component.html" region="delete"></code-example>
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="delete"></code-example>
 
-The `<li>` element should now look like this:
+The HTML for the list of heroes should look like this:
 
-<code-example path="toh-pt6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)"></code-example>
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="list" title="src/app/heroes/heroes.component.html (list of heroes)"></code-example>
 
-In addition to calling the component's `delete()` method, the delete button's
-click handler code stops the propagation of the click event&mdash;you
-don't want the `<li>` click handler to be triggered because doing so would
-select the hero that the user will delete.
+To position the delete button at the far right of the hero entry,
+add some CSS to the `heroes.component.css`.  You'll find that CSS
+in the [final review code](#heroescomponent) below.
 
-The logic of the `delete()` handler is a bit trickier:
+Add the `delete()` handler to the component.
 
-<code-example path="toh-pt6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)"></code-example>
+<code-example path="toh-pt6/src/app/heroes/heroes.component.ts" region="delete" title="src/app/heroes/heroes.component.ts (delete)"></code-example>
 
-Of course you delegate hero deletion to the hero service, but the component
-is still responsible for updating the display: it removes the deleted hero
-from the array and resets the selected hero, if necessary.
+Although the component delegates hero deletion to the `HeroService`,
+it remains responsible for updating its own list of heroes.
+The component's `delete()` method immediately removes the _hero-to-delete_ from that list,
+anticipating that the `HeroService` will succeed on the server.
 
-To place the delete button at the far right of the hero entry,
-add this CSS:
+There's really nothing for the component to do with the `Observable` returned by
+`heroService.delete()`. **It must subscribe anyway**.
 
-<code-example path="toh-pt6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)"></code-example>
+<div class="alert is-important">
 
-### Hero service _delete()_ method
+  If you neglect to `subscribe()`, the service will not send the delete request to the server!
+  As a rule, an `Observable` _does nothing_ until something subscribes!
+  
+  Confirm this for yourself by temporarily removing the `subscribe()`,
+  clicking "Dashboard", then clicking "Heroes".
+  You'll see the full list of heroes again.
 
-Add the hero service's `delete()` method, which uses the `delete()` HTTP method to remove the hero from the server:
+</div>
 
-<code-example path="toh-pt6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)"></code-example>
+#### Add _HeroService.deleteHero()_
+
+Add a `deleteHero()` method to `HeroService` like this.
+
+<code-example path="toh-pt6/src/app/hero.service.ts" region="deleteHero" title="src/app/hero.service.ts (delete)"></code-example>
+
+Note that
+
+* it calls `HttpClient.delete`.
+* the URL is the heroes resource URL plus the `id` of the hero to delete
+* you don't send data as you did with `put` and `post`.
+* you still send the `httpOptions`.
 
 Refresh the browser and try the new delete functionality.
 
-## Observables
+## Search by name
 
-Each `Http` service method  returns an `Observable` of HTTP `Response` objects.
+In this last exercise, you learn to chain `Observable` operators together
+so you can minimize the number of similar HTTP requests
+and consume network bandwidth economically.
 
-The `HeroService` converts that `Observable` into a `Promise` and returns the promise to the caller.
-This section shows you how, when, and why to return the `Observable` directly.
+You will add a *heroes search* feature to the *Dashboard*.
+As the user types a name into a search box, 
+you'll make repeated HTTP requests for heroes filtered by that name.
+Your goal is to issue only as many requests as necessary.
 
-### Background
+#### _HeroService.searchHeroes_
 
-An *Observable* is a stream of events that you can process with array-like operators.
+Start by adding a `searchHeroes` method to the `HeroService`.
 
-Angular core has basic support for observables.
-Developers augment that support with operators and extensions from the
-<a href="http://reactivex.io/rxjs" target="_blank" title="RxJS">RxJS library</a>.
-You'll see how shortly.
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="searchHeroes"
+  title="src/app/hero.service.ts">
+</code-example>
 
-Recall that the `HeroService` chained the `toPromise` operator to the `Observable` result of `http.get()`.
-That operator converted the `Observable` into a `Promise` and you passed that promise back to the caller.
+The method returns immediately with an empty array if there is no search term.
+The rest of it closely resembles `getHeroes()`.
+The only significant difference is the URL, 
+which includes a query string with the search term.
 
-Converting to a Promise is often a good choice. You typically ask `http.get()` to fetch a single chunk of data.
-When you receive the data, you're done.
-The calling component can easily consume a single result in the form of a Promise.
+### Add search to the Dashboard
 
-But requests aren't always done only once.
-You may start one request,
-cancel it, and make a different request before the server has responded to the first request.
+Open the `DashboardComponent` _template_ and
+Add the hero search element, `<app-hero-search>`, to the bottom of the `DashboardComponent` template.
 
-A *request-cancel-new-request* sequence is difficult to implement with `Promise`s, but
-easy with `Observable`s.
+<code-example 
+  path="toh-pt6/src/app/dashboard/dashboard.component.html" title="src/app/dashboard/dashboard.component.html" linenums="false">
+</code-example>
 
-### Add the ability to search by name
+This template looks a lot like the `*ngFor` repeater in the `HeroesComponent` template.
 
-You're going to add a *hero search* feature to the Tour of Heroes.
-As the user types a name into a search box, you'll make repeated HTTP requests for heroes filtered by that name.
+Unfortunately, adding this element breaks the app.
+Angular can't find a component with a selector that matches `<app-hero-search>`.
 
-Start by creating `HeroSearchService` that sends search queries to the server's web API.
+The `HeroSearchComponent` doesn't exist yet. Fix that.
 
-<code-example path="toh-pt6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts"></code-example>
+### Create _HeroSearchComponent_
 
-The `http.get()` call in `HeroSearchService` is similar to the one
-in the `HeroService`, although the URL now has a query string.
+Create a `HeroSearchComponent` with the CLI.
 
-More importantly, you no longer call `toPromise()`.
-Instead you return the *Observable* from the the `http.get()`,
-after chaining it to another RxJS operator, <code>map()</code>,
-to extract heroes from the response data.
-RxJS operator chaining makes response processing easy and readable.
-See the [discussion below about operators](tutorial/toh-pt6#rxjs-imports).</span>
+<code-example language="sh" class="code-shell">
+  ng generate component hero-search
+</code-example>
 
-### HeroSearchComponent
+The CLI generates the three `HeroSearchComponent` and adds the component to the `AppModule' declarations
 
-Create a `HeroSearchComponent` that calls the new `HeroSearchService`.
+Replace the generated `HeroSearchComponent` _template_ with a text box and a list of matching search results like this.
 
-The component template is simple&mdash;just a text box and a list of matching search results.
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" title="src/app/hero-search/hero-search.component.html"></code-example>
 
-<code-example path="toh-pt6/src/app/hero-search.component.html" title="src/app/hero-search.component.html"></code-example>
-
-Also, add styles for the new component.
-
-<code-example path="toh-pt6/src/app/hero-search.component.css" title="src/app/hero-search.component.css"></code-example>
+Add private CSS styles to `hero-search.component.css`
+as listed in the [final code review](#herosearchcomponent) below.
 
 As the user types in the search box, a *keyup* event binding calls the component's `search()`
 method with the new search box value.
 
-As expected, the `*ngFor` repeats hero objects from the component's `heroes` property.
+{@a asyncpipe}
 
-But as you'll soon see, the `heroes` property is now an *Observable* of hero arrays, rather than just a hero array.
-The `*ngFor` can't do anything with an `Observable` until you route it through the `async` pipe (`AsyncPipe`).
-The `async` pipe subscribes to the `Observable` and produces the array of heroes to `*ngFor`.
+### _AsyncPipe_
 
-Create the `HeroSearchComponent` class and metadata.
+As expected, the `*ngFor` repeats hero objects.
 
-<code-example path="toh-pt6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts"></code-example>
+Look closely and you'll see that the `*ngFor` iterates over a list called `heroes$`, not `heroes`.
 
-#### Search terms
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="async"></code-example>
 
-Focus on the `searchTerms`:
+The `$` is a convention that indicates `heroes$` is an `Observable`, not an array.
 
-<code-example path="toh-pt6/src/app/hero-search.component.ts" region="searchTerms"></code-example>
+The `*ngFor` can't do anything with an `Observable`.
+But there's also a pipe character (`|`) followed by `async`,
+which identifies Angular's `AsyncPipe`.
 
-A `Subject` is a producer of an _observable_ event stream;
-`searchTerms` produces an `Observable` of strings, the filter criteria for the name search.
+The `AsyncPipe` subscribes to an `Observable` automatically so you won't have to
+do so in the component class.
 
-Each call to `search()` puts a new string into this subject's _observable_ stream by calling `next()`.
+### Fix the _HeroSearchComponent_ class
 
-{@a ngoninit}
+Replace the generated `HeroSearchComponent` class and metadata as follows.
 
-#### Initialize the *heroes* property (*ngOnInit*)
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.ts" title="src/app/hero-search/hero-search.component.ts"></code-example>
 
-A `Subject` is also an `Observable`.
-You can turn the stream
-of search terms into a stream of `Hero` arrays and assign the result to the `heroes` property.
+Notice the declaration of `heroes$` as an `Observable`
+<code-example 
+  path="toh-pt6/src/app/hero-search/hero-search.component.ts" 
+  region="heroes-stream">
+</code-example>
 
-<code-example path="toh-pt6/src/app/hero-search.component.ts" region="search"></code-example>
+You'll set it in [`ngOnInit()`](#search-pipe). 
+Before you do, focus on the definition of `searchTerms`.
 
-Passing every user keystroke directly to the `HeroSearchService` would create an excessive amount of HTTP requests,
+### The _searchTerms_ RxJS subject
+
+The `searchTerms` property is declared as an RxJS `Subject`.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.ts" region="searchTerms"></code-example>
+
+A `Subject` is both a source of _observable_ values and an `Observable` itself.
+You can subscribe to a `Subject` as you would any `Observable`.
+
+You can also push values into that `Observable` by calling its `next(value)` method
+as the `search()` method does.
+
+The `search()` method is called via an _event binding_ to the
+textbox's `keystroke` event.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="input"></code-example>
+
+Every time the user types in the textbox, the binding calls `search()` with the textbox value, a "search term". 
+The `searchTerms` becomes an `Observable` emitting a steady stream of search terms.
+
+{@a search-pipe}
+
+### Chaining RxJS operators
+
+Passing a new search term directly to the `searchHeroes()` after every user keystroke would create an excessive amount of HTTP requests,
 taxing server resources and burning through the cellular network data plan.
 
-Instead, you can chain `Observable` operators that reduce the request flow to the string `Observable`.
-You'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
+Instead, the `ngOnInit()` method pipes the `searchTerms` _observable_  through a sequence of RxJS operators that reduce the number of calls to the `searchHeroes()`,
+ultimately returning an _observable_ of timely hero search results (each a `Hero[]`).
+
+Here's the code.
+
+<code-example 
+  path="toh-pt6/src/app/hero-search/hero-search.component.ts" 
+  region="search">
+</code-example>
+
+
 
 * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
 before passing along the latest string. You'll never make requests more frequently than 300ms.
+
+
 * `distinctUntilChanged` ensures that a request is sent only if the filter text changed.
+
+
 * `switchMap()` calls the search service for each search term that makes it through `debounce` and `distinctUntilChanged`.
 It cancels and discards previous search observables, returning only the latest search service observable.
 
 
 <div class="l-sub-section">
 
-  With the [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html)
-  (formerly known as `flatMapLatest`),
-  every qualifying key event can trigger an `http()` method call.
+  With the [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html),
+  every qualifying key event can trigger an `HttpClient.get()` method call.
   Even with a 300ms pause between requests, you could have multiple HTTP requests in flight
   and they may not return in the order sent.
 
-  `switchMap()` preserves the original request order while returning only the observable from the most recent `http` method call.
+  `switchMap()` preserves the original request order while returning only the observable from the most recent HTTP method call.
   Results from prior calls are canceled and discarded.
 
-  If the search text is empty, the `http()` method call is also short circuited
-  and an observable containing an empty array is returned.
-
-  Note that until the service supports that feature, _canceling_ the `HeroSearchService` Observable
+  Note that _canceling_ a previous `searchHeroes()` _Observable_
   doesn't actually abort a pending HTTP request.
-  For now, unwanted results are discarded.
+  Unwanted results are simply discarded before they reach your application code.
 
 </div>
 
+Remember that the component _class_ does not subscribe to the `heroes$` _observable_.
+That's the job of the [`AsyncPipe`](#asyncpipe) in the template.
 
-* `catch` intercepts a failed observable.
-The simple example prints the error to the console; a real life app would do better.
-Then to clear the search result, you return an observable containing an empty array.
+#### Try it
 
-{@a rxjs-imports}
-
-### Import RxJS operators
-
-Most RxJS operators are not included in Angular's base `Observable` implementation.
-The base implementation includes only what Angular itself requires.
-
-When you need more RxJS features, extend  `Observable` by *importing* the libraries in which they are defined.
-Here are all the RxJS imports that _this_ component needs:
-
-<code-example path="toh-pt6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false"></code-example>
-
-The `import 'rxjs/add/...'` syntax may be unfamiliar.
-It's missing the usual list of symbols between the braces: `{...}`.
-
-You don't need the operator symbols themselves.
-In each case, the mere act of importing the library
-loads and executes the library's script file which, in turn, adds the operator to the `Observable` class.
-
-### Add the search component to the dashboard
-
-Add the hero search HTML element to the bottom of the `DashboardComponent` template.
-
-<code-example path="toh-pt6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false"></code-example>
-
-Finally, import `HeroSearchComponent` from
-<code>hero-search.component.ts</code>
-and add it to the `declarations` array.
-
-
-<code-example path="toh-pt6/src/app/app.module.ts" region="search" title="src/app/app.module.ts (search)"></code-example>
-
-Run the app again. In the Dashboard, enter some text in the search box.
+Run the app again. In the *Dashboard*, enter some text in the search box.
 If you enter characters that match any existing hero names, you'll see something like this.
 
 <figure>
   <img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
 </figure>
 
-## App structure and code
+## Final code review
 
-Review the sample source code in the <live-example></live-example> for this page.
-Verify that you have the following structure:
+Your app should look like this <live-example></live-example>.
 
-<div class='filetree'>
-  <div class='file'>angular-tour-of-heroes</div>
-  <div class='children'>
-    <div class='file'>src</div>
-    <div class='children'>
-      <div class='file'>app</div>
-      <div class='children'>
-        <div class='file'>app.component.ts</div>
-        <div class='file'>app.component.css</div>
-        <div class='file'>app.module.ts</div>
-        <div class='file'>app-routing.module.ts</div>
-        <div class='file'>dashboard.component.css</div>
-        <div class='file'>dashboard.component.html</div>
-        <div class='file'>dashboard.component.ts</div>
-        <div class='file'>hero.ts</div>
-        <div class='file'>hero-detail.component.css</div>
-        <div class='file'>hero-detail.component.html</div>
-        <div class='file'>hero-detail.component.ts</div>
-        <div class='file'>hero-search.component.html (new)</div>
-        <div class='file'>hero-search.component.css (new)</div>
-        <div class='file'>hero-search.component.ts (new)</div>
-        <div class='file'>hero-search.service.ts (new)</div>
-        <div class='file'>hero.service.ts</div>
-        <div class='file'>heroes.component.css</div>
-        <div class='file'>heroes.component.html</div>
-        <div class='file'>heroes.component.ts</div>
-        <div class='file'>in-memory-data.service.ts (new)</div>
-      </div>
-      <div class='file'>main.ts</div>
-      <div class='file'>index.html</div>
-      <div class='file'>styles.css</div>
-      <div class='file'>systemjs.config.js</div>
-      <div class='file'>tsconfig.json</div>
-    </div>
-    <div class='file'>node_modules ...</div>
-    <div class='file'>package.json</div>
-  </div>
-</div>
+Here are the code files discussed on this page (all in the `src/app/` folder).
+
+{@a heroservice}
+{@a inmemorydataservice}
+{@a appmodule}
+#### _HeroService_, _InMemoryDataService_, _AppModule_
+
+<code-tabs>
+  <code-pane 
+    title="hero.service.ts" 
+    path="toh-pt6/src/app/hero.service.ts">
+  </code-pane>
+  <code-pane 
+    title="in-memory-data.service.ts"
+    path="toh-pt6/src/app/in-memory-data.service.ts">
+  </code-pane>
+  <code-pane 
+    title="app.module.ts" 
+    path="toh-pt6/src/app/app.module.ts">
+  </code-pane>
+</code-tabs>
+
+{@a heroescomponent}
+#### _HeroesComponent_
+
+<code-tabs>
+  <code-pane 
+    title="heroes/heroes.component.html" 
+    path="toh-pt6/src/app/heroes/heroes.component.html">
+  </code-pane>
+  <code-pane 
+    title="heroes/heroes.component.ts" 
+    path="toh-pt6/src/app/heroes/heroes.component.ts">
+  </code-pane>
+  <code-pane 
+    title="heroes/heroes.component.css" 
+    path="toh-pt6/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a herodetailcomponent}
+#### _HeroDetailComponent_
+
+<code-tabs>
+  <code-pane 
+    title="hero-detail/hero-detail.component.html"
+    path="toh-pt6/src/app/hero-detail/hero-detail.component.html">
+  </code-pane>
+  <code-pane 
+    title="hero-detail/hero-detail.component.ts" 
+    path="toh-pt6/src/app/hero-detail/hero-detail.component.ts">
+  </code-pane>
+</code-tabs>
+
+{@a herosearchcomponent}
+#### _HeroSearchComponent_
+
+<code-tabs>
+  <code-pane 
+    title="hero-search/hero-search.component.html"
+    path="toh-pt6/src/app/hero-search/hero-search.component.html">
+  </code-pane>
+  <code-pane 
+    title="hero-search/hero-search.component.ts"
+    path="toh-pt6/src/app/hero-search/hero-search.component.ts">
+  </code-pane>
+  <code-pane 
+    title="hero-search/hero-search.component.css"
+    path="toh-pt6/src/app/hero-search/hero-search.component.css">
+  </code-pane>
+</code-tabs>
 
 ## Summary
 
@@ -528,30 +650,6 @@ You're at the end of your journey, and you've accomplished a lot.
 * You configured an in-memory web API.
 * You learned how to use Observables.
 
-Here are the files you added or changed in this page.
-
-
-<code-tabs>
-  <code-pane title="app.comp...ts" path="toh-pt6/src/app/app.component.ts"></code-pane>
-  <code-pane title="app.mod...ts" path="toh-pt6/src/app/app.module.ts"></code-pane>
-  <code-pane title="heroes.comp...ts" path="toh-pt6/src/app/heroes.component.ts"></code-pane>
-  <code-pane title="heroes.comp...html" path="toh-pt6/src/app/heroes.component.html"></code-pane>
-  <code-pane title="heroes.comp...css" path="toh-pt6/src/app/heroes.component.css"></code-pane>
-  <code-pane title="hero-detail.comp...ts" path="toh-pt6/src/app/hero-detail.component.ts"></code-pane>
-  <code-pane title="hero-detail.comp...html" path="toh-pt6/src/app/hero-detail.component.html"></code-pane>
-  <code-pane title="hero.service.ts" path="toh-pt6/src/app/hero.service.ts"></code-pane>
-  <code-pane title="in-memory-data.service.ts" path="toh-pt6/src/app/in-memory-data.service.ts"></code-pane>
-</code-tabs>
-
-<code-tabs>
-  <code-pane title="hero-search.service.ts" path="toh-pt6/src/app/hero-search.service.ts"></code-pane>
-  <code-pane title="hero-search.component.ts" path="toh-pt6/src/app/hero-search.component.ts"></code-pane>
-  <code-pane title="hero-search.component.html" path="toh-pt6/src/app/hero-search.component.html"></code-pane>
-  <code-pane title="hero-search.component.css" path="toh-pt6/src/app/hero-search.component.css"></code-pane>
-</code-tabs>
-
-## Next step
-
-That concludes the "Tour of Heroes" tutorial.
+This concludes the "Tour of Heroes" tutorial.
 You're ready to learn more about Angular development in the fundamentals section,
 starting with the [Architecture](guide/architecture "Architecture") guide.
diff --git a/aio/tools/examples/run-example-e2e.js b/aio/tools/examples/run-example-e2e.js
index ab909c7600..3783744184 100644
--- a/aio/tools/examples/run-example-e2e.js
+++ b/aio/tools/examples/run-example-e2e.js
@@ -16,7 +16,6 @@ const SJS_SPEC_FILENAME = 'e2e-spec.ts';
 const CLI_SPEC_FILENAME = 'e2e/app.e2e-spec.ts';
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 const IGNORED_EXAMPLES = [ // temporary ignores
-  'toh-',
   'quickstart',
   'http',
   'setup',
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
index da9a0bb7ea..acdeb220c6 100644
--- a/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
@@ -9,6 +9,7 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts",
-    "testing/**"
+    "testing/**",
+    "**/*.1.*"
   ]
 }