CODEWITHSUNDEEP
polymer
Azrim
Azrim

Reputation: 51

Polymer: Transfer data between sibling pages(elements)

I need help by transferring data between two sibling elements of the polymer app. I can't make one of them to be the parent so that I can use dispatchEvent for the transfer of these elements.

Is there any way to transfer data between two sibling elements in polymer?

Upvotes: 0

Views: 273

Answers (2)

Azrim
Azrim

Reputation: 51

My code:

<my-view1 name="view1" param="{{value}}"></my-view1>
      <my-view2 name="view2" param="{{value}}"></my-view2>

VIEW1:

static get properties(){

    return {
        eventValue: {
            type: String,
            value: "Mirza",
            notify: true
        }
    }
  }

  changeParam(){
    this.param = "Azrim";
    this.eventValue = "Mirzoni";
    console.log("Param in view1: " + this.param);
    console.log("EventValue in view1: " + this.eventValue);
  }

VIEW2:

static get is() { return 'my-view2'; }


  seeParam(){
    console.log("Param in view2: " + this.param);
    this.addEventListener('event-value-changed', function(e){
        console.log("Receiving value...");
    });
  }

Upvotes: 0

Nikita Vozisov
Nikita Vozisov

Reputation: 66

Of course, for example you can use DataBinding:

<some-element param="{{value}}"></some-element>
<another-element param="{{value}}"></another-element>

In these elements you can change this "value" param and it will be changed in another one:

<script>
class ... 
 changeParam(){
this.param="newValue";
}
</script>

Another way is using events. But you don't need to dispatch it. For example:

class ....
static get properties(){
 return {
  prop:{
   type: Object,
   value: {},
   notify: true // (*)
 }
}

In line with * you can see notify property. It fires event "prop-changed" when, as you could figure out, prop changes. So you can addEventListener for this event. Note: somePropertyWhichCanBeChanged changes to some-property-which-can-be-changed-changed event.

Upvotes: 1

Related Questions