From 508b779a4104ccd9bb53eccc36c2498d1f607dbd Mon Sep 17 00:00:00 2001
From: Foxandxss <foxandxss@gmail.com>
Date: Mon, 23 May 2016 14:55:37 +0200
Subject: [PATCH] docs(toh): add instructions to add the goBack method closes
 #1478

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

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 4920273f20..73ea334fc2 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
@@ -46,9 +46,11 @@ export class HeroDetailComponent implements OnInit {
         .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion save
+  // #docregion goback
   goBack(savedHero: Hero = null) {
     this.close.emit(savedHero);
     if (this.navigated) { window.history.back(); }
   }
+  // #enddocregion goback
 }
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index a3cbccec48..2eff1e6aa7 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -220,19 +220,24 @@ code-example(format="." language="bash").
   ### Add/Edit in the *HeroDetailComponent*
   We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
   
-+makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")     
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
 
 :marked
   In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
 
   The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
   
-+makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")
 
 :marked
   The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
   
-  Earlier we used the `save()` method to return a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.     
+  After we save a hero, we redirect the browser back to the to the previous page using the `goBack()` method.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".")
+
+:marked
+  Here we call `emit` to notify that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.
 
 .l-sub-section
   :marked
@@ -242,7 +247,7 @@ code-example(format="." language="bash").
   Here is `HeroDetailComponent` with its new save button.
   
 figure.image-display
-  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button") 
+  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")
 
 :marked
   ### Add/Delete in the *HeroesComponent*
@@ -254,12 +259,12 @@ figure.image-display
   As we noted above, that is the component's cue to create and present an empty hero.
   
   Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`).
-+makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")  
++makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")
 :marked
   The user can *delete* an existing hero by clicking a delete button next to the hero's name.
   
   Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag:
-+makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")  
++makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")
 
 :marked
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.