docs(toh): add explanation for using the search box

closes #2002

Author: Foxandxss

public/docs/_examples/toh-6/ts/app/dashboard.component.ts

@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+// #docregion hero-search-component
 import { Component, OnInit } from '@angular/core';
 import { Router }           from '@angular/router';
 
@@ -13,6 +14,7 @@ import { HeroSearchComponent } from './hero-search.component';
   styleUrls: ['app/dashboard.component.css'],
   directives: [HeroSearchComponent]
 })
+// #enddocregion hero-search-component
 export class DashboardComponent implements OnInit {
 
   heroes: Hero[] = [];

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -492,9 +492,21 @@ block observables-section
   :marked
     We load them all at once by importing `rxjs-extensions` in `AppComponent`.
 
-  +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".")  
+  +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".")
+
+  :marked
+    ### Adding the search component to the dashboard
+
+    We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template.
+
+  +makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html')
+
+  :marked
+    And finally, we import the `HeroSearchComponent` and add it to the `directives` array.
+
+  +makeExcerpt('app/dashboard.component.ts', 'hero-search-component')
+
   :marked
-    Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`.
     Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles.
     At some point it might look like this.