diff --git a/aio/content/examples/toh-pt1/app/app.component.1.ts b/aio/content/examples/toh-pt1/app/app.component.1.ts
new file mode 100644
index 0000000000..cebe8e6759
--- /dev/null
+++ b/aio/content/examples/toh-pt1/app/app.component.1.ts
@@ -0,0 +1,44 @@
+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-pt3/app/app.component.1.html b/aio/content/examples/toh-pt3/app/app.component.1.html
new file mode 100644
index 0000000000..8b6c3b0d82
--- /dev/null
+++ b/aio/content/examples/toh-pt3/app/app.component.1.html
@@ -0,0 +1,12 @@
+<h1>{{title}}</h1>
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #docregion hero-detail-binding -->
+<hero-detail [hero]="selectedHero"></hero-detail>
+<!-- #enddocregion hero-detail-binding -->
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
new file mode 100644
index 0000000000..fec477fbd7
--- /dev/null
+++ b/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion v1
+import { Component } from '@angular/core';
+
+// #enddocregion v1
+// #docregion hero-import
+import { Hero } from './hero';
+// #enddocregion hero-import
+
+// #docregion v1
+@Component({
+  selector: 'hero-detail',
+// #enddocregion v1
+  // #docregion template
+  template: `
+    <div *ngIf="hero">
+      <h2>{{hero.name}} details!</h2>
+      <div><label>id: </label>{{hero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="hero.name" placeholder="name"/>
+      </div>
+    </div>
+  `
+  // #enddocregion template
+// #docregion v1
+})
+export class HeroDetailComponent {
+// #enddocregion v1
+// #docregion hero
+  hero: Hero;
+// #enddocregion hero
+// #docregion v1
+}
+// #enddocregion v1