anchor.diff: +[[vaadin-angular2-polymer.tutorial]]
   = Angular 2 with Polymer Elements Tutorial
   
  +[[vaadin-angular2-polymer.tutorial.introduction]]
   == Introduction
   
   TODO: Link the resulting application code repository in this section when it gets published.
  
positive.code: See http://w3c.github.io/webcomponents/spec/imports/#fetching-import[Fetching Import section of the HTML Imports Spec] for more detailed information about the fetching algorithm.
  ====
  
  == Building the Application Layout with Paper Elements
  
  After the previous step we have some Polymer elements imported in [filename]#index.html# of our application. In this step, we are going to use them to create an application layout with a toolbar in [classname]#AppComponent#.
  
negative.code: 
  Now it’s time to look at the browser window again to the heroes list in our application. Here is how it should look like:
  
  [[figure.vaadin-angular2-polymer.tutorial.heroes-list]]
  .A Screenshot of the Application with the List of Heroes
  image::img/heroes-list.png[width="432",height="644"]
  
  [[vaadin-angular2-polymer.tutorial.hero-editor]]
  == 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.
  