9

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.

Community
  • 1
  • 1
danguilherme
  • 642
  • 8
  • 23
  • Yep. Pretty sure core-input's value property needs to be set to `reflect: true` in order for this to work (https://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? https://github.com/Polymer/core-input/issues/new – ebidel Jul 03 '14 at 00:16
  • @edibel I've had similar problems and it sometimes doesn't work even if the "reflect: true" is set. – ipaul Jul 03 '14 at 16:46
  • 1
    @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 Jul 03 '14 at 17:02
  • Are u using some third party library? – vlio20 Jul 05 '14 at 21:54
  • See also this question http://stackoverflow.com/questions/24340258/angular-polymer-data-binding – vlio20 Jul 05 '14 at 21:59

1 Answers1

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

Strife86
  • 1,135
  • 1
  • 10
  • 18
  • This seems to be a good lib, will try it soon and see if it solves the issue (even though I will not use polymer anymore). – danguilherme Aug 21 '14 at 13:34
  • If youre not going to do polymer anymore .... and i really get why (its painfull to develop in that) this is a very good alternative, almost every beauty of polymer in a simple bootstrap way :) [link](http://fezvrasta.github.io/bootstrap-material-design/) – Strife86 Oct 29 '14 at 15:37