9
9
import { FocusMonitor , FocusTrapFactory } from '@angular/cdk/a11y' ;
10
10
import { DOCUMENT } from '@angular/common' ;
11
11
import {
12
- AfterViewInit ,
13
12
ChangeDetectionStrategy ,
14
13
ChangeDetectorRef ,
15
14
Component ,
@@ -46,9 +45,7 @@ import {cssClasses, numbers} from '@material/dialog';
46
45
'[class._mat-animation-noopable]' : '!_animationsEnabled' ,
47
46
} ,
48
47
} )
49
- export class MatDialogContainer extends _MatDialogContainerBase implements
50
- AfterViewInit , OnDestroy {
51
-
48
+ export class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
52
49
/** Whether animations are enabled. */
53
50
_animationsEnabled : boolean = this . _animationMode !== 'NoopAnimations' ;
54
51
@@ -75,7 +72,10 @@ export class MatDialogContainer extends _MatDialogContainerBase implements
75
72
super ( elementRef , focusTrapFactory , changeDetectorRef , document , config , focusMonitor ) ;
76
73
}
77
74
78
- ngAfterViewInit ( ) {
75
+ _initializeWithAttachedContent ( ) {
76
+ // Delegate to the original dialog-container initialization (i.e. saving the
77
+ // previous element, setting up the focus trap and moving focus to the container).
78
+ super . _initializeWithAttachedContent ( ) ;
79
79
// Note: Usually we would be able to use the MDC dialog foundation here to handle
80
80
// the dialog animation for us, but there are a few reasons why we just leverage
81
81
// their styles and not use the runtime foundation code:
@@ -106,7 +106,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements
106
106
this . _waitForAnimationToComplete ( this . _openAnimationDuration , this . _finishDialogOpen ) ;
107
107
} else {
108
108
this . _hostElement . classList . add ( cssClasses . OPEN ) ;
109
- this . _finishDialogOpen ( ) ;
109
+ // Note: We could immediately finish the dialog opening here with noop animations,
110
+ // but we defer until next tick so that consumers can subscribe to `afterOpened`.
111
+ // Executing this immediately would mean that `afterOpened` emits synchronously
112
+ // on `dialog.open` before the consumer had a change to subscribe to `afterOpened`.
113
+ Promise . resolve ( ) . then ( ( ) => this . _finishDialogOpen ( ) ) ;
110
114
}
111
115
}
112
116
0 commit comments