Igniteui-angular: Dialog emits close event with field isOpen in true

[lalo-mx]

Description

Dialog emits close event with the field isOpen in true

• igniteui-angular version: 7.1.0
• browser: Chrome 71.0.3578.98

Steps to reproduce

1. Open sample
2. Click on "Show alert message" button
3. Click on "Close" button

Result

The message shows "Is alert dialog still open? - true".

Expected result

The message shows "Is alert dialog still open? - false"
The onClose event should be emitted until the dialog is closed and the field isOpen has value false.

User story

In our app the first dialog is a save confirmation and the second is showing the result of the operation. Sometimes the save is very fast so the first dialog does not finish hiding so the second one is not showed.

Attachments

igniteui-dialog-close.zip

[tachojelev]

Hello @lalo-mx,

Thank you for the detailed description you have provided.

The behavior you have described is actually expected, because the onClose event emitter of the IgxDialogComponent is an ing type event (its the same as naming the emitter onClosing and not onClosed). This is why when the event is emitted, the dialog has just started to close and is not closed yet and this is why isOpen is still true by that time.

In order to execute any specific behavior as soon as the dialog has fully closed, you can handle the onClosed event of the dialog's respective toggleRef element. (The toggleRef is the underlying toggle element that gets shown/hidden).

For example:

    <igx-dialog #alert title="Notification"
        message="Alert message"
        leftButtonLabel="Close"
        (onLeftButtonSelect)="close()"
        >
    </igx-dialog>


     <igx-dialog #info title="Result"
        [message]="result"
        leftButtonLabel="OK"
        (onLeftButtonSelect)="info.close()">
    </igx-dialog>

  public ngAfterContentInit() {
    this.alert.toggleRef.onClosed.subscribe(() => this.onClosed());
  }
...
  public onClosed() {
    this.result = "Is alert dialog still open? - " + this.alert.isOpen;
    this.info.open();
  }

I have also attached a sample application that demonstrated the behavior from above.

igniteui-dialog-close(Modified).zip

[lalo-mx]

Thanks @tachojelev. It is working now with the suggested approach in the sample. I still have doubts about the default behavior of the close event. Where would be useful the current behavior of the close event?