Name: Observe Property Changes on a Custom Polymer Element
Uploaded: 2015-12-18T15:27:35-06:00
Description: Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

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

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

https://app.egghead.io/api/v1/lessons/javascript-observe-property-changes-on-a-custom-polymer-element/subtitles

[00:00] Polymer allows us to tack on an observer delegate to any of our properties. I've set up a quick little element here called observer element. Going to have an input with the type of text and its value. It's going to be bound to, we'll say, color on the on input event of our input. 

[00:22] I'm just going to have a simple H1 here, just going to say "Hello," and going to get back an ID of "Hello." 

[00:31] Now, here in our properties, of course, we're going to have our color key here. That's going to have a type of string. Then we're going to tack on our observer key. 

[00:43] Now, here, we can delegate the observation of any change to this property to a named function. I'm just going to go ahead and pass in color changed. 

[00:53] Now, unlike a notify element, this is not an automatically created call back. We do need to create this ourselves. Here's our color changed function. 

[01:04] As an observer, it automatically gets two values. The first one is new value, and the second one is old value. The new value being the new value for that property and the old value being the previous value. 

[01:18] To get a look at that, we'll just go ahead and log out new val and old val. Save that, and over here in the browser, we'll bring up our developer tools. As I type this, you can see that we are, in fact, getting the new value as well as the previous value. 

[01:33] We can do with that whatever we please. I'm just going to go ahead and say this.$, which is how we access the local DOM. I'm going to say "Hello," which is the idea of our element. Going to say style.color is equal to new val. 

[01:48] Save that and up here, if I type "red," we get red as our style.color. If I type "blue," we get blue, "green," we get green. 



Observe Property Changes on a Custom Polymer Element

Share this video with your friends

Course

Creating Custom Web Elements with Polymer 2