feat(cdk/dialog): Support for Leaving Animation - wait for all child animations to complete before disposing the overlay

[Char2sGu]

Feature Description

Currently, when closing a dialog, the corresponding overlay is immediately disposed (L106):

https://github.com/angular/components/blob/e3eef47f80a7c1dda4b538128fed7f530f7cdff1/src/cdk/dialog/dialog-ref.ts#L99-L113

And when disposing an overlay, the host <div> element of the overlay is immediately removed from the DOM (L269):

https://github.com/angular/components/blob/e3eef47f80a7c1dda4b538128fed7f530f7cdff1/src/cdk/overlay/overlay-ref.ts#L252-L280

The current behavior completely eliminated the possibility to implement a :leave animation for dialogs, since the ancestor element of the dialog, the overlay, is removed via the native DOM API, and the Angular animation engine cannot hook into this process to perform the :leave animation.

As a solution, I propose to allow the DialogContainer to decide when the overlay should be disposed. By doing so, we can create another DialogContainer aside from CdkDialogContainer, e.g. LeaveAnimationAwareDialogContainer, which performs a leave animation that does nothing but animateChild(). The LeaveAnimationAwareDialogContainer notifies the DialogRef to dispose the overlay after the leaving animation is completed.

Use Case

No response