refactor: add onAttached and onDetached observables

Author: crisbeto

src/lib/core/overlay/overlay-ref.ts

@@ -13,6 +13,8 @@ import {Subject} from 'rxjs/Subject';
 export class OverlayRef implements PortalHost {
   private _backdropElement: HTMLElement = null;
   private _backdropClick: Subject<any> = new Subject();
+  private _onAttach = new Subject<void>();
+  private _onDetach = new Subject<void>();
 
   constructor(
       private _portalHost: PortalHost,
@@ -41,6 +43,7 @@ export class OverlayRef implements PortalHost {
     this.updateSize();
     this.updateDirection();
     this.updatePosition();
+    this._onAttach.next();
     this._state.scrollStrategy.enable();
 
     // Enable pointer events for the overlay pane element.
@@ -65,6 +68,7 @@ export class OverlayRef implements PortalHost {
     // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
     this._togglePointerEvents(false);
     this._state.scrollStrategy.disable();
+    this._onDetach.next();
 
     return this._portalHost.detach();
   }
@@ -80,6 +84,9 @@ export class OverlayRef implements PortalHost {
     this.detachBackdrop();
     this._portalHost.dispose();
     this._state.scrollStrategy.disable();
+    this._onDetach.next();
+    this._onDetach.complete();
+    this._onAttach.complete();
   }
 
   /**
@@ -96,6 +103,16 @@ export class OverlayRef implements PortalHost {
     return this._backdropClick.asObservable();
   }
 
+  /** Returns an observable that emits when the overlay has been attached. */
+  onAttach(): Observable<void> {
+    return this._onAttach.asObservable();
+  }
+
+  /** Returns an observable that emits when the overlay has been detached. */
+  onDetach(): Observable<void> {
+    return this._onDetach.asObservable();
+  }
+
   /**
    * Gets the current state config of the overlay.
    */

src/lib/core/overlay/overlay.spec.ts

@@ -137,6 +137,44 @@ describe('Overlay', () => {
     expect(pane.getAttribute('dir')).toEqual('rtl');
   });
 
+  it('should emit when an overlay is attached', () => {
+    let overlayRef = overlay.create();
+    let spy = jasmine.createSpy('onAttach spy');
+
+    overlayRef.onAttach().subscribe(spy);
+    overlayRef.attach(componentPortal);
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should emit when an overlay is detached', () => {
+    let overlayRef = overlay.create();
+    let spy = jasmine.createSpy('onDetach spy');
+
+    overlayRef.onDetach().subscribe(spy);
+    overlayRef.attach(componentPortal);
+    overlayRef.detach();
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should emit and complete the observables when an overlay is disposed', () => {
+    let overlayRef = overlay.create();
+    let disposeSpy = jasmine.createSpy('dispose spy');
+    let attachCompleteSpy = jasmine.createSpy('attachCompleteSpy spy');
+    let detachCompleteSpy = jasmine.createSpy('detachCompleteSpy spy');
+
+    overlayRef.onAttach().subscribe(null, null, attachCompleteSpy);
+    overlayRef.onDetach().subscribe(disposeSpy, null, detachCompleteSpy);
+
+    overlayRef.attach(componentPortal);
+    overlayRef.dispose();
+
+    expect(disposeSpy).toHaveBeenCalled();
+    expect(attachCompleteSpy).toHaveBeenCalled();
+    expect(detachCompleteSpy).toHaveBeenCalled();
+  });
+
   describe('positioning', () => {
     let state: OverlayState;