Communication in Polymer

In my last post I discussed the concept of Properties in Polymer Custom Elements. Properties are also used to make our Elements more dynamic. Hence in this post I will give an overview of how, via Properties, two or more Elements can talk to each other.

Host Element and Children

In Polymer Data Binding is used for the host element and its children to pass data via properties. But first let us look into what do we mean by host and children in Polymer Elements:

In the above example we have a Custom Element: <x-custom> and this is our Host Element. It has two children: <div> and <input>

This pattern of the children elements in the template of the host element is also called Mediator Pattern. Currently, in our code example above, the host and the children have no way to pass data. This is where we can use Data Binding.

Data Binding

Okay so let us think about what we want to accomplish. We have a host element with a String property input. The host element’s DOM will showcase a <div> and an <input> that allows the user to type in a value in the input field.

What we want to do is that when the user enter’s some value in the input field we want <input> to send an event notification stating that its value has changed and we want the host element to appropriately set its input property to the new value and change <div> to showcase this new value.

Without Data Binding we would need to do the following in order to pass the data from <input> to <x-custom> and back to <div>:

On entering a new input, the _handleInput function is called that then sets new value to the input property. A change in the property value triggers the _inputChanged observer function which then sets the DOM value of <div> and <input> to the new value.

With the use of Data Binding, we accomplish the same effect and can also get rid of the observer function and the handleInput function:

Notice how I changed the Child B from <input> to a Polymer Element <paper-input>. You can check out the documentation of <paper-input> here. We can see from Paper Input’s API that it has a property called value, which according to the documentation is the value for this input. In the template I have bound the attribute value of <paper-input> to the input property of <x-custom>.

With two way Data Binding, anytime the value changes of <paper-input>, it will set the input property of <x-custom> to the new value which will then push this change to its children.

Using this Mediator Pattern, we can also then do:

We can make the <x-custom> element as a child of the new Host Element <y-custom> and bind <x-custom> property input to <y-custom> property label. But there is one change we would have to make in <x-custom>:

The input property now has a notify flag set to true that will propogate the changes to the property upward to the hosts.

This way we can pass data from one Element to another.

An Event in one Element to Trigger a Method in Another

How about a scenario where a particular event in Host Element A causes a separate event to trigger in Host Element B. How can we accomplish this goal?

We can use Polymer custom element <iron-signals> for this kind of communication:

In the example above we have two separate Host Elements: <el-a> and <el-b>. In <el-a> after the trigger of an event, the click of a button in the example above, we want for an action to occur, like an instance method call in the example above, in <el-b>.

So in the button element of <el-a> we set the on-click attribute to call the instance method _handleClick. And in _handleClick we fire an iron-signal event with a particular name, mysignal, and also pass some data. Then in the <el-b> template we use the Polymer Element <iron-signals> and give the event name mysignal to listen for in order to trigger the instance method listenFunc in <el-b>. This way the click of a button in Element A will result in a method call in Element B.