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

Question

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.

Answer 1

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