Menu
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.
443
Angular's two-way binding syntax is a combination of square brackets and parentheses, [()] . The [()] syntax combines the brackets of property binding, [] , with the parentheses of event binding, () , as follows.
Two-way binding means that any data-related changes affecting the model are immediately propagated to the matching view(s), and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When app data changes, so does the UI, and conversely.
A data binding connects data from a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element). The host element data can be a property or sub-property represented by a data path, or data generated based on one or more paths.
Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
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
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
