Create a Custom Element using Polymer

Use Lifecycle Callbacks On Custom Polymer Elements

Style Custom Elements in Polymer

Extend Native HTML Elements with Polymer

Understand Declared Property Basics in Polymer

Data Bind Two Polymer Elements

Observe Property Changes on a Custom Polymer Element

Create Event Listeners in Polymer Elements

Execute Custom Events in Polymer

Iterate over a Collection with Polymer's dom-repeate

Creating Custom Web Elements with Polymer 2

Polymer provides us a variety of data-binding configurations.  In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

[00:00] In this lesson, we're going to talk about data binding between a parent and a child element.

[00:06] Here in the top, we're going to set up our parent element. I'm going to call this parent element. It's going to be a really simple element. We're just going to have a paragraph tag that says it's parent just so we can identify it in the browser. We're going to have an input with the type of text. We're going to go ahead and set our value equal to, and we're going to data bind, we'll call it parent data, and we're going to change that on the onInput event of our input.

[00:34] Then below that, we're going to drop our child element. Into that we're going to pass an attribute of data equal to our parent data value. Here in our child element, going to set that up so this will be child element, we'll have a paragraph tag here with child. We'll also have an input type of text, our value here will be the data that's passed in. Again, we'll update that on the input event of our input.

[01:13] We'll have another paragraph tag here with output. Then we'll simply output our data value. Now to use this in the parent element, we're going to need to HTML import that, so child element to HTML.

[01:30] We can see this here as we type in the parent element. We can see that it is populating the children element input. Of course, it's updating our output. If I reload that, we can see I type here parent.

[01:43] Now you'll notice when I type here child is only updating its own value. It's not reporting back to the parent. What we have here is one way data binding where we're passing down to the parent or from the parent to the child. But we're not binding that data back up to the parent.

[02:02] To do that, we're going to go ahead and set up our properties. Of course, we've got this data value. Its type is going to be string. We're going to set a key here called notify. We're going to set that to true. This is a property that allows us to notify any other host element that this property has changed.

[02:26] Now we'll try this and we'll type parent. We can see that it's populating or passing its data down to the child. Now when we type child, we are in fact passing that data back up to the parent. Now we've achieved two way data binding as opposed to one way, downward data binding.

[02:45] If we wanted to enforce the one way data binding from our parent component down to our child component, we can use the one way data syntax. This means that even though the child element is prepared to two way data bind with its host, the parent element is saying, "No, we don't want to two way data bind."

[03:04] Now we've reinforced that. Here if I type parent, we are passing that value down to the child. Here if I pass child, you can see that we have not passed that data back up to the parent. We've only updated our own value.

[03:19] If we go ahead and set that back to two way data binding, another thing we can do is we can enforce the opposite one way data binding where it's from child to parent. Everything right now is set for two way data binding. What I'm going to do is set this attribute to read only, so therefore any value that's passed in from the parent will not change this.

[03:44] However, we can change our own value, so I'm going to give this a default value of child. We'll save that. What you can see is that, despite the fact that the parent passed in its parent data value, which had no value, to the child, the child updated that value with the default value and ignored anything that was passed in by the parents and, in turn, updated the parent.

[04:09] Another interesting thing that happens with the notify, is we get a notify function automatically created for us. Here in our child component, let's say we're going to do this in the ready state, we're going to add an event listener to data-change. Whatever our property name is and then -change, this event is firing any time that that value is changed.

[04:36] We'll just have a callback function here, and we'll just log out, let's take in our event. What we'll do is we'll log out the event detail.value. This is going to be how we get to the value of the attribute that's been changed, so we'll save that.

[04:56] Now up here as I type, we can see that the value is being logged out there. If I come down here and type we can see again that the value is being logged out. We've got this automatic event listener created for us, and obviously we can utilize that however we please.

Course

Creating Custom Web Elements with Polymer 2

Data Bind Two Polymer Elements

Share this video with your friends