anchor.diff:  export class AppComponent { }
   ----
   
  -Save changes and launch the development server to see the results in your browser. After loading, your application have this look:
  +Save changes and launch the development server to see the results in your browser. After loading, your application should have this look:
   
   [[figure.app.layout]]
   .A Screenshot of Empty Application Layout
   image::img/app-layout.png[width="432",height="644"]
   
  -Now your application has a layout made by using `app-header-layout`, `app-header` and `app-toolbar`.
  +Now your application has a layout made by using [elementname]#app-header-layout#, [elementname]#app-header# and [elementname]#app-toolbar#.
   
   === Elements Used in This Step
   
  -`app-header-layout`:: The application layout consisting of the `app-header` and the main contents. In our case, it adds a scrollable container for the application contents as well.
  -
  -`app-header`:: Acts as a header in the application layout. The header is fixed in our application.
  -
  -`app-toolbar`:: Provides a toolbar wrapper.
  +[elementname]#app-header-layout#:: The application layout consisting of the [elementname]#app-header# and the main contents. In our case, it adds a scrollable container for the application contents as well.
  +
  +[elementname]#app-header#:: Acts as a header in the application layout. The header is fixed in our application.
  +
  +[elementname]#app-toolbar#:: Provides a toolbar wrapper.
   
   [NOTE]
   .app-layout Elements are Design-Agnostic
   ====
  -Polymer elements from `app-layout` set, including `app-toolbar` that we use, are design-agnostic. They do not enforce have Material Design look by default, though still support it. Therefore we need to adjust `app-toolbar` styles a bit.
  -
  -Therefore we added color rules for the `app-toolbar` in the styles of the `AppComponent`. We reuse the color values of default theme from `paper-styles`.
  -
  -Apart from the colors, it inherits the font family declared for the body. We have already decleared our font settings for the body in `index.html` earliear during this step.
  +Polymer elements from [elementname]#app-layout# set, including [elementname]#app-toolbar# that we use, are design-agnostic. They do not enforce have Material Design look by default. Therefore we need to adjust [elementname]#app-toolbar# styles a bit.
  +
  +Therefore we added color rules for the [elementname]#app-toolbar# in the styles of the [classname]#AppComponent#. We reuse the color values of default theme from [elementname]#paper-styles#.
  +
  +Apart from the colors, it inherits the font family declared for the body. We have already decleared our font settings for the body in [filename]#index.html# earliear during this step.
   ====
   
   [IMPORTANT]
   .PolymerElement Directives
   ====
  -In order to enable all features of Polymer elements used inside your Angular component templates, remember to import `PolymerElement` in the component file and add `PolymerElement('element-name')` line for each Polymer element you use to the `directives` array of your component metadata.
  +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.
   ====
   
   == List Heroes with Vaadin Grid
   
  -In the previous step we added the application layout with `app-layout` elements. Next we are going add actual application content. Our plan is to use Vaadin Grid to list Heroes.
  +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.
   
   [NOTE]
   .Some Parts are Explained in the Tour of Heroes
   ====
  -This step partly follows the Angular 2 Tour of Heroes Tutorial. Therefore here we skip explaining the parts of the code that are similar in both this tutorial and the Tour of Heroes, like the `Hero` class and the `HeroService`.
  +This step partly follows the Angular 2 Tour of Heroes Tutorial. Therefore here we skip explaining the parts of the code that are similar in both this tutorial and the Tour of Heroes, like the [classname]#Hero# class and the [classname]#HeroService#.
   
   See https://angular.io/docs/ts/latest/tutorial/[Tour of Heroes] for the detailed explainations of these parts.
   ====
   
   === Hero Class
   
  -Let us start with creating the `Hero` class. Add `app/hero.ts` file with the following contents:
  +Let us start with creating the [classname]#Hero# class. Add [filename]#app/hero.ts# file with the following contents:
   
   [source,typescript]
   .app/hero.ts
  
positive.code: }
  ----
  
  Unlike in Angular 2 Tour of Heroes, in our application we are about to store and expose birthday of each hero for the user. Here we add `birthday: string;` property to our `Hero` class.
  
  [NOTE]
  .Using Strings to Store Dates
  ====
  Why are we using tye `string` type and not `Date` to store dates? There are two reasons:
  
  . Builtin JavaScript `Date` type is always stored as a timestamp, so it always contains the exact time information. This is not only redundant, but also harder to use then a plain string in case of storing just a date. It requires extra care about the correct time and timezone when storing the value and displaying it to the user, otherwise we might get incorrect dates because of timezone mismatches.
  
  . `Vaadin DatePicker`, as well as native HTML5 `<input type="date">`, gives the date value as an ISO-formatted `string`. To keep the simplicity, in our application we also store dates as strings, avoiding conversions.
  ====
  
  === Mock Heroes Data
  
  Add `app/mock-heroes.ts` file with some heroes data:
  
  [source,typescript]
  .app/mock-heroes.ts
  
negative.code: 
  === Npm Dependency
  
  Alongside with bower dependencies, we also need to add one npm dependency to the project. `@vaadin/angular2-polymer` package adds support for Polymer elements in Angular 2 component templates. Run this command to install the package and save the dependency in [filename]#package.json# at the same time:
  
  [subs="normal"]
  ----
  [prompt]#$# [command]#npm# install @vaadin/angular2-polymer --save
  ----
  
  == 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.
  
  In your project root, edit the [filename]#index.html# file and replace the contents with these lines:
  
  [source,html]
  ----
  