docs(toh): add missing snippets

closes #1649

Author: Foxandxss

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,

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.