Closing a Polymer Dialog from within a Angular2 component

Question

I have a paper-dialog tags.page.html

<paper-dialog id="test" #tagDialog>
  <h2>Tag Dialog</h2>
  <tags-form [tag]="tagNameRef.value" [formState]="tagsFormState_ | async" (tag_)="onSaveTag($event)"></tags-form>
</paper-dialog>

inside there is a Angular2 component TagsForm. I want to close the Dialog when the user click on the method onClose() of TagsFrom.

I did try this but its not working...

onClose() {
    let event = new CustomEvent('iron-overlay-canceled',{
        detail:{canceled:false},
        bubbles: true,
        cancelable: false
    });
    this.elem.dispatchEvent(event);        
}

What am I doing wrong ? I was thinking that dispatching the event should close the modal. Any pointer as to why this is not working and how to get this to work would be appreciated.

Answer 1

The event iron-overlay-canceled is fired when the overlay is canceled, but before it doesn't close dialog.

close: function() {
  this._setCanceled(false);
  this.opened = false;
},
cancel: function(event) {
  var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
  if (cancelEvent.defaultPrevented) {
    return;
  }
  this._setCanceled(true);
  this.opened = false;
},

(Github source)

You can subscribe on this event, but if you want to close the dialog then you have to fire close or cancel method on dialog component.

If you will call cancel method then it will fire the mentioned above iron-overlay-canceled and close the dialog. close method accordingly will just close the dialog.

The easiest way to achieve this would be to use EventEmitter as shown below:

tags-form.component.ts

@Output() closeDialog = new EventEmitter();
onClose() {
  this.closeDialog.emit()
}

tags.page.html

<paper-dialog id="dialog" #tagDialog>
  <h2>Tag Dialog</h2>
  <tags-form (closeDialog)="tagDialog.close()"></tags-form>
</paper-dialog>

Plunker Example