From 4507589e2698b9058d11fcf658666e7107d6c08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesu=CC=81s=20Rodri=CC=81guez?= <Foxandxss@gmail.com>
Date: Fri, 29 Jul 2016 15:33:43 +0200
Subject: [PATCH] docs(toh): add explanation for using the search box closes
 #2002

---
 .../toh-6/ts/app/dashboard.component.ts          |  2 ++
 public/docs/ts/latest/tutorial/toh-pt6.jade      | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index f7b4100cee..82a817fa5a 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
+++ b/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[] = [];
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 6e3fa96c65..104c8575fe 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/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.