anchor.diff:      Pay close attention to the shape of the data returned by the server.
       This particular *in-memory web api* example happens to return an object with a `data` property.
       Your api might return something else.
  -    
  -    Adjust the code to match *your web api*. 
  -:marked
  -  The caller is unaware of these machinations. It receives a promise of *heroes* just as it did before. 
  +
  +    Adjust the code to match *your web api*.
  +:marked
  +  The caller is unaware of these machinations. It receives a promise of *heroes* just as it did before.
     It has no idea that we fetched the heroes from the server.
     It knows nothing of the twists and turns required to turn the http response into heroes.
     Such is the beauty and purpose of delegating data access to a service like this `HeroService`.
   :marked
     ### Error Handling
  -  
  +
     At the end of `getHeroes` we `catch` server failures and pass them to an error handler:
   +makeExample('toh-6/ts/app/hero.service.ts', 'catch')(format=".")
   :marked
  -  This is a critical step! 
  +  This is a critical step!
     We must anticipate http failures as they happen frequently for reasons beyond our control.
   
   +makeExample('toh-6/ts/app/hero.service.ts', 'error-handler', 'app/hero.service.ts (Error handler)')(format=".")
  
positive.code: 
  .l-sub-section
    :marked
      The `emit` "handshake" between `HeroDetailComponent` and `HeroesComponent` is an example of component to component communication. This is a topic for another day, but we have detailed information in our <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">Component Interaction Cookbook</a>  
  
  :marked
    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")
  
  :marked
    ### Add/Delete in the *HeroesComponent*
    
    The user can *add* a new hero by clicking a button and entering a name.
  
    When the user clicks the *Add New Hero* button, we display the `HeroDetailComponent`.
    We aren't navigating to the component so it won't receive a hero `id`;
    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.html (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.html (delete)')(format=".")
  
  :marked
    Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.
    Let's start with *add*.
    
    We're using the `HeroDetailComponent` to capture the new hero information.
    We have to tell Angular about that by importing the `HeroDetailComponent` and referencing it in the component metadata `directives` array.
  +makeExample('toh-6/ts/app/heroes.component.ts', 'hero-detail-component', 'app/heroes.component.ts (HeroDetailComponent)')(format=".")  
  .l-sub-section
    :marked
      These are the same lines that we removed in the previous [Routing](toh-pt5.html) chapter.
      We didn't know at the time that we'd need the *HeroDetailComponent* again. So we tidied up.
      
      Now we *must* put these lines back. If we don't, Angular will ignore the `<my-hero-detail>`
      tag and pushing the *Add New Hero* button will have no visible effect.
  :marked
    Next we implement the click handler for the *Add New Hero* button.
  
  +makeExample('toh-6/ts/app/heroes.component.ts', 'add', 'app/heroes.component.ts (add)')(format=".")  
  :marked
    The `HeroDetailComponent` does most of the work. All we do is toggle an `*ngIf` flag that
    swaps it into the DOM when were add a hero and remove it from the DOM when the user is done.
    
    The *delete* logic is a bit trickier.
  +makeExample('toh-6/ts/app/heroes.component.ts', 'delete', 'app/heroes.component.ts (delete)')(format=".")
  
  :marked
    Of course we delegate the persistence of hero deletion to the `HeroService`. 
    But the component is still responsible for updating the display.
    So the *delete* method removes the deleted hero from the list.
  
  
negative.code: 
  :marked
    # Getting and Saving Data with HTTP
  
    Our stakeholders appreciate our progress.
    Now they want to get the hero data from a server, let users add, edit, and delete heroes,
    and save these changes back to the server.
  
    In this chapter we teach our application to make the corresponding http calls to a remote server's web api.
  :marked
    [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).
  
  .l-main-section
  :marked
    ## Where We Left Off
  