anchor.diff:  
   == Hero Editor and Routing
   
  -Previously we added the heroes list in our application. In this step we are going to add the editing feature. After that, the user should be able to navigate to the hero details by clicking a row in the heroes list, edit the details and get back to the list with the back button in the toolbar.
  +Previously we added the heroes list in our application. In this step, we are going to add the editing feature. After that, the user should be able to navigate to the hero details by clicking a row in the heroes list, edit the details and get back to the list with the back button in the toolbar.
   
   [NOTE]
   .Some Parts are Explained in the Tour of Heroes
  
positive.code: 
  === The Hero Service
  
  We also need a `HeroService` to be able to retrive the heroes list in our Angular application. Add `app/hero.service.ts` file:
  
  [source,typescript]
  .app/hero.service.ts
  
negative.code: .A Screenshot of the List of Heroes
  image::img/heroes-list-default.png[width="432",height="644"]
  
  By clicking on a grid row, the user can open the the hero detail editor screen. It is made using Paper Input and Vaadin DatePicker:
  
  [[figure.hero.detail]]
  .A Screenshot of Hero Detail View
  image::img/hero-detail.png[width="432",height="644"]
  
  Both screens have a context-sensitive toolbar at the top, containing the title and the optional back icon button.
  
  == Creating Project
  
  This tutorial is based on the Angular 2 QuickStart TypeScript source code. In this step, we create a new project on top of the QuickStart source code.
  
  [NOTE]
  ====
  