How do I observe property changes in Polymer 3?

Question

How do I implement continuous checking (time based) of a property-change in a component using an event listener in Polymer 3?

These are my component's properties:

static get properties() {
  return {
    longitude: {
      type: Number
    },
    latitude: {
      type: Number
    },
    accuracy: {
      type: Number
    }
  };
}

Answer 1

You could use a complex observer that is called whenever any of the specified properties change. To do this, declare an observers getter that returns a string array, where each string is the observer method name, followed by a list of dependencies (ie, properties to be observed) in parentheses:

static get observers() {
  return ['_onPropsChanged(longitude, latitude, accuracy)'];
}

_onPropsChanged(longitude, latitude, accuracy) {
  console.log({ longitude, latitude, accuracy });
}

demo