feat(overlay-directives): attach and detach events (#1972)

Author: kara

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

@@ -167,6 +167,23 @@ describe('Overlay directives', () => {
               `Expected directive to emit an instance of ConnectedOverlayPositionChange.`);
     });
 
+    it('should emit attach and detach appropriately', () => {
+      expect(fixture.componentInstance.attachHandler).not.toHaveBeenCalled();
+      expect(fixture.componentInstance.detachHandler).not.toHaveBeenCalled();
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.attachHandler).toHaveBeenCalled();
+      expect(fixture.componentInstance.attachResult)
+          .toEqual(jasmine.any(HTMLElement),
+              `Expected pane to be populated with HTML elements when attach was called.`);
+      expect(fixture.componentInstance.detachHandler).not.toHaveBeenCalled();
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+      expect(fixture.componentInstance.detachHandler).toHaveBeenCalled();
+    });
+
   });
 
 });
@@ -178,7 +195,8 @@ describe('Overlay directives', () => {
   <template connected-overlay [origin]="trigger" [open]="isOpen" [width]="width" [height]="height"
             [hasBackdrop]="hasBackdrop" backdropClass="md-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
-            (positionChange)="positionChangeHandler($event)">
+            (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
+            (detach)="detachHandler()">
     <p>Menu content</p>
   </template>`,
 })
@@ -191,6 +209,12 @@ class ConnectedOverlayDirectiveTest {
   hasBackdrop: boolean;
   backdropClicked = false;
   positionChangeHandler = jasmine.createSpy('positionChangeHandler');
+  attachHandler = jasmine.createSpy('attachHandler').and.callFake(() => {
+    this.attachResult =
+        this.connectedOverlayDirective.overlayRef.overlayElement.querySelector('p') as HTMLElement;
+  });
+  detachHandler = jasmine.createSpy('detachHandler');
+  attachResult: HTMLElement;
 
   @ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
 }

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

@@ -110,6 +110,8 @@ export class ConnectedOverlayDirective implements OnDestroy {
   /** Event emitted when the backdrop is clicked. */
   @Output() backdropClick = new EventEmitter<void>();
   @Output() positionChange = new EventEmitter<ConnectedOverlayPositionChange>();
+  @Output() attach = new EventEmitter<void>();
+  @Output() detach = new EventEmitter<void>();
 
   // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
 
@@ -205,6 +207,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);
+      this.attach.emit();
     }
 
     if (this.hasBackdrop) {
@@ -218,6 +221,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
   private _detachOverlay() {
     if (this._overlayRef) {
       this._overlayRef.detach();
+      this.detach.emit();
     }
 
     if (this._backdropSubscription) {

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

@@ -19,6 +19,11 @@ export class OverlayRef implements PortalHost {
       private _state: OverlayState,
       private _ngZone: NgZone) { }
 
+  /** The overlay's HTML element */
+  get overlayElement(): HTMLElement {
+    return this._pane;
+  }
+
   attach(portal: Portal<any>): any {
     if (this._state.hasBackdrop) {
       this._attachBackdrop();