From 22b89ea58a53964767b3e7de95348cce7f0275f2 Mon Sep 17 00:00:00 2001
From: Vani <psreep@gmail.com>
Date: Wed, 28 Nov 2018 10:03:21 -0800
Subject: [PATCH] docs: move text that mention what is expected to fail up
 higher into the section (#27329)

PR Close #27329
---
 aio/content/tutorial/toh-pt2.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index 1a4b9a5578..571f14ba6e 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -37,7 +37,7 @@ In the same file (`HeroesComponent` class), define a component property called `
 
 Open the `HeroesComponent` template file and make the following changes:
 
-* Add an `<h2>` at the top, 
+* Add an `<h2>` at the top,
 * Below it add an HTML unordered list (`<ul>`)
 * Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
 * Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
@@ -52,14 +52,14 @@ Now change the `<li>` to this:
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
 </code-example>
 
-The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive. 
+The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive.
 It repeats the host element for each element in a list.
 
 In this example
 
 * `<li>` is the host element
 * `heroes` is the list from the `HeroesComponent` class.
-* `hero` holds the current hero object for each iteration through the list. 
+* `hero` holds the current hero object for each iteration through the list.
 
 <div class="alert is-important">
 
@@ -73,7 +73,7 @@ After the browser refreshes, the list of heroes appears.
 
 ### Style the heroes
 
-The heroes list should be attractive and should respond visually when users 
+The heroes list should be attractive and should respond visually when users
 hover over and select a hero from the list.
 
 In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
@@ -109,7 +109,7 @@ The `heroes.component.css` styles apply only to the `HeroesComponent` and don't
 
 ## Master/Detail
 
-When the user clicks a hero in the **master** list, 
+When the user clicks a hero in the **master** list,
 the component should display the selected hero's **details** at the bottom of the page.
 
 In this section, you'll listen for the hero item click event
@@ -144,14 +144,12 @@ to the component's `selectedHero`.
 
 ### Update the details template
 
-The template still refers to the component's old `hero` property which no longer exists. 
+The template still refers to the component's old `hero` property which no longer exists.
 Rename `hero` to `selectedHero`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)" linenums="false">
 </code-example>
 
-### Hide empty details with _*ngIf_
-
 After the browser refreshes, the application is broken.
 
 Open the browser developer tools and look in the console for an error message like this:
@@ -160,23 +158,25 @@ Open the browser developer tools and look in the console for an error message li
   HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
 </code-example>
 
-Now click one of the list items.
-The app seems to be working again.
-The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
-
 #### What happened?
 
 When the app starts, the `selectedHero` is `undefined` _by design_.
 
 Binding expressions in the template that refer to properties of `selectedHero` &mdash; expressions like `{{selectedHero.name}}` &mdash; _must fail_ because there is no selected hero.
 
-#### The fix
+Now, click one of the list items.
+The app seems to be working again.
+The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
+
+#### The fix - hide empty details with _*ngIf_
+
 
 The component should only display the selected hero details if the `selectedHero` exists.
 
 Wrap the hero detail HTML in a `<div>`.
 Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
 
+
 <div class="alert is-important">
 
 Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
@@ -212,7 +212,7 @@ If the user clicks "Magneta", that hero should render with a distinctive but sub
 That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
 You just have to apply the `.selected` class to the `<li>` when the user clicks it.
 
-The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally. 
+The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally.
 Just add `[class.some-css-class]="some-condition"` to the element you want to style.
 
 Add the following `[class.selected]` binding to  the `<li>` in the `HeroesComponent` template:
@@ -232,7 +232,7 @@ The finished `<li>` looks like this:
 
 ## Final code review
 
-Your app should look like this <live-example></live-example>. 
+Your app should look like this <live-example></live-example>.
 
 Here are the code files discussed on this page, including the `HeroesComponent` styles.