message: docs: move text that mention what is expected to fail up higher into the section
  PR Close
diff: @@ -150,8 +150,6 @@ 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.
  