CODEWITHSUNDEEP
angularpolymer
Witek
Witek

Reputation: 6472

Polymer paper element attributes and Angular

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?

Upvotes: 3

Views: 648

Answers (2)

SnareChops
SnareChops

Reputation: 13347

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.

Upvotes: 2

jeff
jeff

Reputation: 3327

try this <paper-card [heading]="someVarFromComponent"></paper-card>

Upvotes: 0

Related Questions