diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 73ea334fc2..bce249dcc1 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -1,6 +1,8 @@
 // #docplaster
-// #docregion
+// #docregion, variables-imports
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+// #enddocregion variables-imports
 import { RouteParams } from '@angular/router-deprecated';
 
 import { Hero }        from './hero';
@@ -11,11 +13,13 @@ import { HeroService } from './hero.service';
   templateUrl: 'app/hero-detail.component.html',
   styleUrls: ['app/hero-detail.component.css']
 })
+// #docregion variables-imports
 export class HeroDetailComponent implements OnInit {
   @Input() hero: Hero;
   @Output() close = new EventEmitter();
   error: any;
   navigated = false; // true if navigated here
+  // #enddocregion variables-imports
 
   constructor(
     private heroService: HeroService,
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 7098025b0a..09d52d3058 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -217,6 +217,11 @@ code-example(language="bash").
   Loading heroes using `Http` required no changes outside of `HeroService`, but we added a few new features as well.
   In the following section we will update our components to use our new methods to add, edit and delete heroes.
 
+  Before we can add those methods, we need to initialize some variables with their respective imports.
+
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'variables-imports', 'app/hero-detail.component.ts')(format=".")
+
+:marked
   ### Add/Edit in the *HeroDetailComponent*
 
   We already have `HeroDetailComponent` for viewing details about a specific hero.