Search code examples
dartdart-polymer

Passing a changing value from 1 webcomponent into another

I have 2 webcomponents, which have the same linked value

<my-input value="{{data}}"></my-input>
<my-output value="{{data}}"></my-output

So that way, when i change a paper input in my-input it will change the attribute value in my-output accordingly.

The issue is that nothing ends up displaying, even on the basecase of output being:

<div>Data: {{value}}</div>

so it seems that the variable isnt linked to both components.

the data variable is defined as:

@property String data;
Solution

  • in the definition in the components for value you need to have:

    @Property(notify:true)
String value;

    so that way it propagates up. It seems that without this, it just stops the propagation. This will then push the changed value up a level to the parent data variable.

    As a follow on: It is only needing to notify if the variable itself is changed inside of the Web Component. That is dependent entirely on your design.