anchor.diff:  In order to enable all features of Polymer elements used inside your Angular component templates, remember to import [classname]#PolymerElement# in the component file and add `PolymerElement('element-name')` line for each Polymer element you use to the [propertyname]#directives# array of your component metadata.
   ====
   
  +[[vaadin-angular2-polymer.tutorial.list-heroes]]
   == List Heroes with Vaadin Grid
   
   In the previous step we added the application layout with [elementname]#app-layout# elements. Next we are going add actual application content. Our plan is to use Vaadin Grid to list Heroes.
  
positive.code: 
  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
  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.
  
negative.code: [prompt]#$# [command]#npm# install @vaadin/angular2-polymer --save
  ----
  
  [[vaadin-angular2-polymer.tutorial.polymer]]
  == Adding Polymer Elements to Our Application
  
  In the previous step, we downloaded elements to bower_components directory. Now we are going to import these elements in our application.
  