anchor.diff:  [[vaadin-angular2-polymer.overview]]
   = Angular 2 Integration
   
  -Since Vaadin Elements are built using Polymer, you need the [literal]#https://github.com/vaadin/angular2-polymer[@vaadin/angular2-polymer]# directive to enable seamless usage within Angular 2 applications.
  -
   The `angular2-polymer` is a directive factory that aims at bridging the gaps between using link:https://www.polymer-project.org[Polymer] based Web Components in link:https://angular.io/[Angular 2] applications.
   
   It scrapes the Polymer element API in order to define Angular 2 `outputs` and `inputs`, to apply the `ngControl` and the `ngForm` directives, and to observe DOM changes updating the element's DOM tree appropriately.
  +
  +Since Vaadin Elements are built using Polymer, you need the [literal]#https://github.com/vaadin/angular2-polymer[@vaadin/angular2-polymer]# directive to enable seamless usage within Angular 2 applications.
   
   == Quick Start
   
  
positive.code: [prompt]#$# [command]#bower# install [replaceable]#element-name#
  ----
  
  . Load the Web Components polyfill for non Chrome browsers, and import the element.
  +
  [source,html,subs="normal"]
  .index.html
  
negative.code: <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/[replaceable]#element-name#/[replaceable]#element-name#.html">
  ----
  +
  You also need to wait for the "WebComponentsReady" event before bootstrapping the Angular 2 app. The event is fired after all of the web components have finished registering and are ready to be used.
  +
  [source,html,subs="normal"]
  .index.html
  ----
  <script>
    document.addEventListener('WebComponentsReady', function() {
      System.import('app').catch(function(err){ console.error(err); });
    });
  </script>
  ----
  . Import the Angular 2 directives and use them in your code.
  +
  [source,typescript,subs="normal"]
  