title: HTML import angular2 app and pass parameter
body: <p>I want to use webcomponents and HTML import to import an angular2 module into another webapplication which do not use angular2. I know HTML import is only natively supported in few browsers but i will use the polymer framework to pollify other browsers. </p>
  
  <p>I can import the angular app but i'm unable to pass parameters to the angular app from my web app that imports the angular app. I'm trying this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="sale-stats"&gt;
    &lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
    &lt;template&gt;
      &lt;!-- contains my angular app bundled js files --&gt;
      &lt;link rel="import" href="imports.html"&gt;
      {{saleid}} &lt;!-- this displays the saleid just to see that the parameter is passed to the webcomponent --&gt;
  
      &lt;app-root saleid='{{saleid}}'&gt;Loading... &lt;/app-root&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      HTMLImports.whenReady(function () {
  
        Polymer({
          is: 'sale-stats',
  
          properties: {
            saleid: {
                  type: String,
                  value: '0'
              }
          },
        });
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  
  &lt;script src="/Scripts/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="http://localhost:9600/salestats/index.html" /&gt;
  &lt;sale-stats saleid="1234567"&gt;&lt;/sale-stats&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do i pass parameters to my angular app when using the angular app as a webcomponent that is imported into another app? Or is it just completely wrong to try and import an angular app as an webcomponent?</p>