igxDialog two-way [(isOpen)] + if and animations

[pmoleri]

Hi,

I think it would be nice if I can combine dialog [(isOpen)], @if and animations:

e.g.

@if (emailNotificationShowing) {
  <igx-dialog
    #emailNotification
    title="Notification"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK"
    [positionSettings]="positionSettings"
    [(isOpen)]="emailNotificationShowing"            <-- 2-way bind
    (leftButtonSelect)="emailNotification.close()"   <-- use dialog close()
  >
  </igx-dialog>
}

Why?

• @if () allows for the dialog to be created on demand, rather than being allocated all the time and consuming change detection cycles.
• [(isOpen)] seems convenient, but currently isOpen is set to false before the animiation plays, making the dialog destroy immediately and no animation is played.

Alternatives:

I can remove the 2-way binding and subscribe to the closed event:

@if (emailNotificationShowing) {
  <igx-dialog
    #emailNotification
    title="Notification"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK"
    [positionSettings]="positionSettings"
    [isOpen]="true"        <--   always true (@if is controlling the existence already)
    (closed)="emailNotificationShowing=false"  <--- set to false when animation finished
    (leftButtonSelect)="emailNotification.close()"
  >
  </igx-dialog>
}

The proposal here is to make isOpenChange to emit false when the animation finishes and not before it plays.

Full example:
https://stackblitz.com/edit/mu8mffcj-4bzaa9fn?file=src%2Fapp%2Fdialog-sample-1%2Fdialog-sample-1.component.html

Related: #8320