feat(dialog): add afterOpen to MdDialogRef (#6887)

* feat(dialog): add afterOpen to MdDialogRef

Provides a hook for initializing component after animation is
complete.

* Complete afterOpen observable
This commit is contained in:
Will Howell
2017-09-11 20:12:09 -04:00
committed by mmalerba
parent 29399b8ee0
commit 27cbe47839
2 changed files with 37 additions and 3 deletions
+22 -3
View File
@@ -15,7 +15,6 @@ import {MdDialogContainer} from './dialog-container';
// TODO(jelbourn): resizing
// TODO(jelbourn): afterOpen
// Counter for unique dialog ids.
let uniqueId = 0;
@@ -30,11 +29,14 @@ export class MdDialogRef<T> {
/** Whether the user is allowed to close the dialog. */
disableClose = this._containerInstance._config.disableClose;
/** Subject for notifying the user that the dialog has finished opening. */
private _afterOpen = new Subject<void>();
/** Subject for notifying the user that the dialog has finished closing. */
private _afterClosed: Subject<any> = new Subject();
private _afterClosed = new Subject<any>();
/** Subject for notifying the user that the dialog has started closing. */
private _beforeClose: Subject<any> = new Subject();
private _beforeClose = new Subject<any>();
/** Result to be passed to afterClosed. */
private _result: any;
@@ -44,6 +46,16 @@ export class MdDialogRef<T> {
private _containerInstance: MdDialogContainer,
public readonly id: string = `md-dialog-${uniqueId++}`) {
// Emit when opening animation completes
RxChain.from(_containerInstance._animationStateChanged)
.call(filter, event => event.phaseName === 'done' && event.toState === 'enter')
.call(first)
.subscribe(() => {
this._afterOpen.next();
this._afterOpen.complete();
});
// Dispose overlay when closing animation is complete
RxChain.from(_containerInstance._animationStateChanged)
.call(filter, event => event.phaseName === 'done' && event.toState === 'exit')
.call(first)
@@ -75,6 +87,13 @@ export class MdDialogRef<T> {
this._containerInstance._startExitAnimation();
}
/**
* Gets an observable that is notified when the dialog is finished opening.
*/
afterOpen(): Observable<void> {
return this._afterOpen.asObservable();
}
/**
* Gets an observable that is notified when the dialog is finished closing.
*/
+15
View File
@@ -102,6 +102,21 @@ describe('MdDialog', () => {
dialogRef.close();
});
it('should emit when dialog opening animation is complete', fakeAsync(() => {
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
const spy = jasmine.createSpy('afterOpen spy');
dialogRef.afterOpen().subscribe(spy);
viewContainerFixture.detectChanges();
// callback should not be called before animation is complete
expect(spy).not.toHaveBeenCalled();
flushMicrotasks();
expect(spy).toHaveBeenCalled();
}));
it('should use injector from viewContainerRef for DialogInjector', () => {
let dialogRef = dialog.open(PizzaMsg, {
viewContainerRef: testViewContainerRef