Using Angular with Polymer elements

Eric Bidelman · 43K views · 2013 · 9:34

Open on YouTube

Web developmentdemodated

Why Stack Overflow recommends it

Stack Overflow users link it as a demonstration of making Polymer web components and Angular controllers or directives work together, especially with data binding.

Recommended by 1 people across 1 different months, 2013 to 2015.

What it is

A short 2013 screencast by Polymer team member Eric Bidelman comparing Angular directives with Polymer elements and web components. It covers styling both kinds of components and shows how to data bind Angular scope to a Polymer element's attributes.

What people said

Recommends ebidel · 2013-11 · Stack Overflow · on “wiring together polymer components and angular controllers”

I made a video demonstrating how a web component (Polymer element) can talk to an Angular directive: [this video] The example in that video data-binds the components' attributes using Angular's data binding feature, but you should be able to use other features to get things working. Have you tried adding ng-click on <polymer-ui-sidebar-menu> ?

Cites danguilherme · 2014-07 · Stack Overflow · on “Polymer-Angular two-way data binding for framework components (core-elements/paper-elements)”

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 [this video] and already tried the solution provided in this question [LINK] 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

Cites Adi · 2015-05 · Stack Overflow · on “Using AngularJS in a Polymer web component”

To summarize this problem in one line: Angular and Polymer don't go too well together Angular and Polymer use kind of similar syntax when it come to data-binding and other directives , so both these frameworks get confused and returns error or worse nothing at all. Please dont mistake web-components for Angular Directive(custom-elements), Angular compiles these custom-element definition into native elements such as div and p , whereas Polymer makes extensive use of some brand new Specs like Shadow-Dom , html imports and more to develop custom-elements natively, none of which are understood by Angular's compiler. So my suggestion is that if you fancy Meterial-design and you choose Polymer for

Cites alesc · 2015-06 · Stack Overflow · on “Mixing Polymer 1.0 and Angular 1.x”

Yes, Angular and Polymer are very similar, but that does not mean they are not ment to be used together. For example, a Polymer developer made this video on the aforementioned topic: [this video] .