How to use iron-list with Angular 2.0

Question

I'm trying to get iron-list working in Angular 2.0. I'm already using other Polymer 1.0 components, but iron-list depends so heavily on Light DOM. I know I could remove and just *ng-for the content in list, but I'm thinking that's not going to work well. Anyone have any ideas.

Answer 1

Problem here is that Angular 2 parses the <template> elements, although they should be left to the Polymer Templatizer inside <iron-list>.

From my experience, the best way to handle this situation is to wrap <iron-list> inside a custom Polymer element, and define the templates there.

<dom-module id="heroes-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-list items="[[items]]" selection-enabled selected-item="{{selectedItem}}">
     <template>[[item]]</template>
    </iron-list>
  </template>
  <script>
    Polymer({
      is: 'heroes-list',

      properties: {
        items: {
          type: Array
        },

        selectedItem: {
          type: Object,
          notify: true
        },
      }
    });
  </script>
</dom-module>

This element can then be used in any Angular 2 app with two-way-binding like this:

<heroes-list [items]="heroes" (selected-item-changed)="myHero=$event.detail.value">