Polymer-Angular two-way data binding for framework components (core-elements/paper-elements)

9
votes

I am trying to blend Polymer web components in my Angular application, but I am not being able to get the two-way data binding between these frameworks working. I've already watched this video and already tried the solution provided in this question but it still doesn't work for me. These were my attempts:

  • Object attribute value

    <game-card game="{{game}}" bind-polymer></game-card> - based on post-card.html on the Polymer tutorial. game is an object with id, title, etc.

    I created the gameChanged function on the web component and added a new property in the game variable, something like this.game.foo = 'bar';, but if I do

    <pre><code>{{game | json}}</code></pre>

    right after the component, there's no "foo": "bar" in the stringified object. Even with

    publish: { game: {reflect: true} },

    it doesn't work.

  • Framework components

    <core-input value="{{cool}}" bind-polymer></core-input> <paper-input value="{{cool}}" bind-polymer></paper-input>

    It only works if I edit the element's source code to reflect the value attribute (on core-input.html, as paper-input extends it). I think it isn't a good way of solving this issue.

Am I missing something? Is there a good resource I can look for this Angular-Polymer integration? Searching on Google brings more results about the material than about the library itself and, when found, most of them are "Polymer for Dart" resources.

1
angularjspolymer
Yep. Pretty sure core-input's value property needs to be set to reflect: true in order for this to work (github.com/Polymer/core-input/blob/master/core-input.html#L161). Otherwise, the attribute won't update and Angular's data binding system will never see a change. Maybe file a bug? github.com/Polymer/core-input/issues/new - ebidel
@edibel I've had similar problems and it sometimes doesn't work even if the "reflect: true" is set. - ipaul
@ebidel - I will file a bug as soon as possible, thanks for your response. But what about the Object type attribute? Isn't it supposed to add the new property to it, even more with reflect: true? Another issue I came over is that when I pass the game variable to the attribute, sometimes my web component receives a js Object and sometimes it receives a JSON string, forcing me to JSON.parse it. - danguilherme
Are u using some third party library? - vlio20
See also this question stackoverflow.com/questions/24340258/… - vlio20

1 Answers

1
votes

Try with the NG Polymer Elements lib it solves the 2 way data binding of angular and polymer (core and paper elements) and some other stuff that breaks with angular/polymer, it also has the documentation to addyour own custom polymer elements to the angular binding support

NG Polymer Elements