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

Tuesday, July 1, 2014

Take the 2-minute tour ×

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.