Polymer paper element attributes and Angular

Question

I am using Angular and Google Polymer paper elements. Works fine, but I have problems with attributes. While this does work:

<paper-card>{{someVarFromComponent}}</paper-card>

This does NOT:

<paper-card heading="{{someVarFromComponent}}"></paper-card>

someVarFromComponent is a variable of my component. It seems providing variables to templates does not work in the parameters. Or it does not work in parameters for polymer components?

I need to change the content of the heading attribute in <paper-card> when my component variable someVarFromComponent changes.

Is there a solution or workaround for this problem?

It might be necessary to enable full shadow DOM for Polymer to work properly with Angular polymer-project.org/1.0/docs/devguide/settings.html — Günter Zöchbauer
It works for me plnkr. (not familiarized with polymer, but I think it's working). — Eric Martinez
can you add more code? How you define someVarFromComponent? — Dmytro
Can you provide more information so that we can better answer your question and give it the answer it deserves. — SnareChops

SnareChops SnareChops · Accepted Answer · 2016-02-02T07:31:59

As Günter stated in his comment, most likely full shadow DOM support will need to be turned on to work with angular2. By default this is not enabled. Shadow DOM can be enabled by using

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

in the <head> of your index.html file or can be used without the <script> tags in your startup js file (preferably the first piece of code that is executed.

Polymer paper element attributes and Angular

2 Answers