Iron list implementation for Angular 2

[osolano]

Description

I'm currently using Angular 2 with a bunch of Polymer Elements, but have been having trouble implementing iron-list. Wasn't sure where else to post this question, but would appreciate any guidance or tips on this. I've done some research on the web but wasn't able to really find anything that looked helpful.

I've tried implementing iron-list directly in the HTML template of a component, and passing an array of data to the items property but nothing rendered. Also tried passing in template tags inside iron-list in an html template but that didn't seem to help either. I'm also not using iron-ajax in my test since we are retrieving data a different way.

[blasten]

Do you have them in a repo? It seems like many things could be happening. I would appreciate if you can narrow down the issue.

[osolano]

@blasten I've got something up in running right now by importing an html file that resembles the examples.

Do you happen to have any reference to a simple example using iron-list inside angular component's html template?

I'll definitely try setting up a plunker for it but it will take some time since i've been trying to a plunker that has angular 2 setup.

[blasten]

I don't have one, but you could try using https://github.com/vaadin/angular2-polymer

[5amfung]

@blasten I'm also not sure how I should bind an array of items from Angular2 to the iron-list given the following example.

<template is="dom-bind">
  <iron-list items="[[items]]" as="item">
    <template>
      <div>
        Name: [[item.name]]
      </div>
    </template>
  </iron-list>
</template>

I found a similar discussion here. Could you comment if that's the only way to go?

[blasten]

@5amfung using dom-bind?

<template is="dom-bind" id="template1">
   ...
</template>

document.querySelector('#template').items = [];

[Saulis]

AFAIK Angular 2 has it's own mechanism for dealing with <template> elements – in practice it means that any <template> element is considered a Angular 2 template, not Polymer. Angular 2 will also by default take and replace those <template> elements with a comment node placeholder.

I'd say your best option to get <iron-list> working is to wrap it in another Polymer element which encapsulates the <template>. And then you can use angular2-polymer on top of that component to make the property bindings work like native Angular 2 ones.

Technically, it's possible to have a Polymer element that supports templates both for Polymer and Angular 2, but it requires adding an abstraction layer for the templating which can be implemented either with Polymer.Templatizer or with Angular 2 templatizing engine. In case you're interested, I've made Angular 2 templates to work with <iron-data-table>: https://github.com/Saulis/angular2-iron-data-table