How to execute the on-close function or when disabling <paper-dialog> for Polymer 1.0?

Question

Question:

How to 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 Polymer.IronOverlayBehavior , which has iron-overlay-opened and iron-overlay-closed events.

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

https://elements.polymer-project.org/elements/iron-overlay-behavior?active=Polymer.IronOverlayBehavior

Answer 2

Even this is an old topic, there is one more thing that people should know and know:

I highly recommend that you also check event.target inside your listener function. For example, if you have another element using iron-overlay inside the paper-dialog , closing these elements will cause a listener on the 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 you close only the paper dialog box, your code will be executed