Mixing Polymer 1.0 and Angular 1.x

Question

I have an Angular 1.x app, which I am trying to update to material design with the help of Polymer 1.0. I must state that I am only using the paper elements as normal building blocks and that I am not writing any custom Polymer code.

So far, I have encountered 2 problems, both dealing with nested Polymer elements, so I guess the solution will be the same or at least very similar.

Problem 1

Using ng-repeat on a paper-item.

HTML code (with Angular templating syntax)

<paper-item data-ng-repeat="event in events">
    <paper-item-body two-line>
        <div>{{event.title}}</div>
        <div secondary>{{event.description}}</div>
    </paper-item-body>
</paper-item>

The following code does not run as it produces the following error:

TypeError: Cannot read property 'childNodes' of undefined
    at g (angular.js:7531)
    at g (angular.js:7531)
    at N (angular.js:8127)
    at g (angular.js:7527)
    at angular.js:7402
    at $get.h (angular.js:7546)
    at m (angular.js:8159)
    at angular.js:27052
    at Object.fn (angular.js:15474)
    at m.$get.m.$digest (angular.js:15609)

However, if I use the following code, the code does run without error:

<div data-ng-repeat="event in events">
    <paper-item-body two-line>
        <div>{{event.title}}</div>
        <div secondary>{{event.description}}</div>
    </paper-item-body>
</div>

Notice that I only changed the root element (from paper-item to div).

Problem 2

Trying to use google-map to show a marker on a map. The map centers, but there is no marker.

HTML code (with Angular templating syntax)

<google-map latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}">
    <google-map-marker latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}"></google-map-marker>
</google-map>

HTML output (as compiled by Angular at runtime):

<google-map latitude="12.345" longitude="12.345">
    <google-map-marker latitude="NaN" longitude="NaN"></google-map-marker>
</google-map>

Notice the inner tag google-map-marker has NaN as latitude and longitude, while the outer google-map works as intended. This explains why the map centers OK, but no marker is present.

TL;DR

Nesting Polymer elements and using Angular double-mustache syntax is probably causing the conflict, as the inner Polymer elements treat it as Polymer code and not Angular code.

Any ideas how to resolve this problem?

Your first problem is likely related to the ShadyDOM shim. When you compose things into Polymer element imperatively, you have to use the Polymer.dom API to satisfy ShadyDOM (which Angular does not). Try running your example on Chrome, but set window.Polymer.dom = true before importing Polymer to see if it works under native Shadow DOM. Also, Polymer will only act on {{ }} syntax in the context of a template it's processing. — Scott Miles
Thank you for your comment. I am using Chrome, but when I set window.Polymer.dom = true in various locations, nothing happens. Except if I put it after including Polymer elements, then I get multiple error with the following content: Polymer.dom is not a function. — alesc
Don't put window.Polymer.dom = true in various places :), only set that before importing Polymer. If it doesn't have any effect, then I don't know what the problem is. — Scott Miles
I was putting it in various locations because it didn't work. I have tried the following: (1) putting it before anything and got Cannot set property 'dom' of undefined; (2) after webcomponents.js but before polymer.html and got no such error, but it still doesn't work (got the error from the original post); (3) after both webcomponents.js and polymer.html and got the error from my previous comment Polymer.dom is not a function. Overall, it doesn't seem to change anything. — alesc
See polymer-project.org/1.0/docs/devguide/settings.html It should be: window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; — Justin Fagnani

Neeraj Neeraj · Accepted Answer · 2015-06-19T14:55:28

If your aim is to use Material Design (which for web based apps boils down to using the correct themes), I just saw Angular Material (https://material.angularjs.org/latest/#/). Maybe that would help?

Mixing Polymer 1.0 and Angular 1.x

2 Answers