How to Bind Data from Polymer to Angularjs in a Django App?

[Ron Michael]

Hello everyone. I'm currently learning Polymer.js 2.0. I became interested in Polymer when I learned about it's capabilities such as web components, service workers, push notifications, and basically all other things that makes a PWA. 

I have been able to install polymer in Django via bower. And I've successfully used some polymer components such as the app-grid, app-toolbar, iron-list, paper-icons, etc. I was also able to data-bind data from Angularjs to Polymer. Meaning I was able to send like a list from Angularjs and have it repeated on an iron-list in polymer. My problem now is what if I wanted to remove an item from my list. I'd be doing that from my Polymer custom element. I would do an on-tap on a button and delete the item associated to that button. 

But to do so I would like to have it return to my angularjs. That why I can bring it to Angularjs and do my http.post there. I could probably do it in polymer but as much as possible I don't want to have to do http requests on my polymer. I only want to use polymer as a front-end ui. 

I'm a Django developer and I've developed quite a few apps using Django. I wanted to use Polymer as a front-end ui and use its web components since it helps both in performance and the responsiveness. I understand that you can do this with bootstrap and other front-end frameworks but I really wanted to use Polymer. 

Alongside Django I'm using Angularjs 1.5. I love how Angularjs data-binding makes it easier for me to display data from my server to my front-end. I understand that Polymer also has it's own data-binding, but I find it a bit constrictive for me because I'm not really an expert on writing pure javascript. Angularjs makes things easier for me to get stuff from my server and manipulate it rather than using pure js, that's just my opinion. 

 

[jrobins...@gmail.com]

You can dispatch native DOM events from your Polymer elements that angular can listen for. https://www.polymer-project.org/2.0/docs/devguide/events#custom-events

[ronmicha...@gmail.com]

Hi! Thanks for the reply! How do I do this in angularjs? The code shown in the docs was javascript. 

[ronmicha...@gmail.com]

I'm looking as to how I can bind changes from my polymer element towards my angularjs. Like if I have a list and I added an item to my list I want the adding (.push) to happen inside my angular.js instead. I just want polymer to return to me the data I've inputted.

On Wednesday, July 26, 2017 at 9:59:42 PM UTC+8, jrobins...@gmail.com wrote:

[Patrick H.]

Hi,

here's a (now unmaintained) project which works out of the box. Simply look at the examples given in https://gabiaxel.github.io/ng-polymer-elements/. I've used this in my last project and it worked very well.

Best regards,

Patrick

[ronmicha...@gmail.com]

This looks really good :D Can how do I create custom elements with this?