anchor.diff:  
   .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>  
  +    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=".")  
  ++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=".")  
  ++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`. 
  +  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.
   
  
positive.code: 
    We've also decided to return a user friendly form of the error to
    to the caller in a rejected promise so that the caller can display a proper error message to the user.
    
    ### Promises are Promises
    Although we made significant *internal* changes to `getHeroes()`, the public signature did not change. 
    We still return a promise. We won't have to update any of the components that call `getHeroes()`.
  
  .l-main-section   
  :marked
    ## Add, Edit, Delete
    
    Our stakeholders are incredibly pleased with the added flexibility from the api integration, but it doesn't stop there. Next we want to add the capability to add, edit and delete heroes.   
    
    We'll complete `HeroService` by creating `post`, `put` and `delete` http calls to meet our new requirements. 
  
  :marked
    ### Post
    
    We are using `post` to add new heroes. Post requests require a little bit more setup than Get requests, but the format is as follows:
    
  +makeExample('toh-6/ts/app/hero.service.ts', 'post-hero', 'app/hero.service.ts (post hero)')(format=".")
  
  :marked
    Now we create a header and set the content type to `application/json`. We'll call `JSON.stringify` before we post to convert the hero object to a string.  
    
    ### Put
    
    `put` is used to edit a specific hero, but the structure is very similar to a `post` request. The only difference is that we have to change the url slightly by appending the id of the hero we want to edit.
  
  +makeExample('toh-6/ts/app/hero.service.ts', 'put-hero', 'app/hero.service.ts (put hero)')(format=".")
  
  :marked
    ### Delete
    `delete` is used to delete heroes and the format is identical to `put` except for the function name. 
  
  +makeExample('toh-6/ts/app/hero.service.ts', 'delete-hero', 'app/hero.service.ts (delete hero)')(format=".")
  
  :marked
    We add a `catch` to handle our errors for all three cases.
    
  :marked
    ### Save
  
    We combine the call to the private `post` and `put` methods in a single `save` method. This simplifies the public api and makes the integration with `HeroDetailComponent` easier. `HeroService` determines which method to call based on the state of the `hero` object. If the hero already has an id we know it's an edit. Otherwise we know it's an add.
  
  +makeExample('toh-6/ts/app/hero.service.ts', 'save', 'app/hero.service.ts (save hero)')(format=".")
      
  :marked
    After these additions our `HeroService` looks like this:
  
  
negative.code: 
    We generally recommend registering application-wide services in the root `AppComponent` *providers*.
    Here we're registering in `main` for a special reason.
  
    Our application is in the early stages of development and far from ready for production.
    We don't even have a web server that can handle requests for heroes.
    Until we do, *we'll have to fake it*.
  
    We're going to *trick* the http client into fetching and saving data from
    a demo/development service, the *in-memory web api*.
  
    The application itself doesn't need to know and shouldn't know about this.
    So we'll slip the *in-memory web api* into the configuration *above* the `AppComponent`.
  
    Here is a version of `main` that performs this trick
  +makeExample('toh-6/ts/app/main.ts', 'final', 'app/main.ts (final)')(format=".")
  
  :marked
    We're replacing the default `XHRBackend`, the service that talks to the remote server,
  