How do I execute a function on-close or on dismiss of <paper-dialog> for Polymer 1.0?

Question

Question:

How do I automatically execute a function whenever my <paper-dialog> element is closed?

Version: Polymer 1.0

Code:

<paper-dialog id="paper-id"
              entry-animation="scale-up-animation"
              exit-animation="scale-down-animation">
    <sample-element></sample-element>
</paper-dialog>

Answer 1

paper-dialog inherits the Polymer.IronOverlayBehavior, which has the iron-overlay-opened and iron-overlay-closed events.

<paper-dialog
  on-iron-overlay-opened="_myOpenFunction"
  on-iron-overlay-closed="_myClosedFunction"></paper-dialog>

• https://www.webcomponents.org/element/@polymer/iron-overlay-behavior
• code: https://github.com/PolymerElements/iron-overlay-behavior/blob/master/test/iron-overlay-behavior.html (for example: take a look at line 147 for the iron-overload-opened event)

Answer 2

Even this is old topic, there is still 1 thing that people should know and be aware of:

I highly recommend you to also check event.target inside your listener function. For example, if you have another element using iron-overlay inside paper-dialog, closing that elements will trigger listener on paper-dialog. (you can try this with vaadin-date-picker).

So:

<paper-dialog on-iron-overlay-closed="_myClosedFunction"></paper-dialog>

and then _myClosedFunction:

_myClosedFunction(e) {
  if(e.target.nodeName == "PAPER-DIALOG") {
    //...toDo stuff...
  }
}

Now you are guaranteed that whenever only paper-dialog is closed, your code will be executed