How to use Iron List with Angular 2.0

Question

I am trying to get iron-list working in Angular 2.0. I already use other Polymer 1.0 components, but the list of hardware is highly dependent on the Light DOM. I know I can delete and just * ng-for the contents of the list, but I think it won’t work well. Does anyone have any ideas.

Answer 1

The problem here is that Angular 2 parses the <template> elements, although they should be left on the Templatizer polymer inside the <iron-list> .

From my experience, the best way to handle this situation is to wrap a <iron-list> inside a custom Polymer element and define 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 two-way binding Angular 2 application, for example:

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