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
    }
  };
}

static get properties() { return { longitude: { type: Number }, latitude: { type: Number }, accuracy: { type: Number } }; } In this function I want to know how to check for change in longitude and latitude values( that r being passed from html code while running the component) dynamically and update the same accordingly using polymer 3. — Saksham Sondhi, Jul 04 '18 at 05:43
Please do not add code to a comment, rather edit the question. And the given code does only return static stuff from my point of view. Where should a change be detected? — Nico Haase, Jul 04 '18 at 07:08

score 1 · Answer 1 · answered Jul 23 '18 at 23:48

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 (i.e., properties to be observed) in parentheses:

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

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

demo

How do I observe property changes in Polymer 3?

1 Answers1