anchor.diff:  
   === The end result
   
  -In our heroes management application there would be two UI screens. This is the first screen with the list of all heroes made with Vaadin Grid of https://vaadin.com/elements[Vaadin Elements]:
  +In our heroes management application there will be two UI screens. This is the first screen with the list of all heroes made with Vaadin Grid of https://vaadin.com/elements[Vaadin Elements]:
   
   [[figure.heroes.list]]
   .A screenshot of the list of heroes
  
positive.code: 
  == Hero editor and routing
  
  Previosly 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
  
negative.code: 
  Click the back icon in the toolbar to navigate back to the heroes list. If you made any changes in the hero detail editor, they should be shown in the heroes list right away.
  
  === Nice touches in the AppComponent
  
  Here are the UX-related changes to AppComponent explained.
  
  ==== Dynamic toolbar title
  
  We add the `title` property to the `AppComponent` and bind it to the text content of `<div title spacer></div>` inside the toolbar in the template.
  
  Instead of a static title, the title is now updated dynamically. We subscribe to the `Router` in `AppComponent` and use `RouteData` in the navigation event callback to get the title value specified for the current route. Each time after user opens the application or navigates inside, the `Router` event is dispatched so the `title` property is updated.
  
  ==== The back icon in the toolbar
  
  We add `<paper-icon-button>` to have a back icon inside the `<app-toolbar>` in the template. The icon has a click event binding, which calls `goBack()` method of `AppComponent`. In the method, we invoke `navigate` method of the router to navigate back to the heroes list from the hero detail.
  
  When the heroes list is shown, the back icon is useless, so we need to hide it. To achieve that, we added `isInChildView` property to `AppComponent`, which is updated from the route data in the navigation event callback. In the template we add `*ngIf="isInChildView"` for the `<paper-icon-button>`.
  
  We also add a few positioning style rules for the `paper-icon-button`.
  
  ==== Dynamic toolbar shadow
  
  To make the toolbar look better, we make the application toolbar to have a shadow that is shown only for the hero detail view, but not for the heroes list view. For this purpose we bind the `raised` class of the `<app-toolbar>` to `isInChildView` property and add a style rule which applies the shadow mixin from `paper-styles` to the `<app-toolbar>` when it has the `raised` class.
  
  == Wrap-up
  
  All the tutorial steps are complete. Now you can use all powers of Polymer elements in your Angular 2 applications and know how to do it.
  