refactor(connected-overlay-directive): avoid issues with property initialization

* Refactors the `ConnectedOverlayDirective` not to depend on the order in which the `open` and `origin` properties are set.
* Moves the `open`, `offsetX` and `offsetY` properties from using setters to `ngOnChanges` since the latter tends to output less JS.

Fixes #3225.

Author: crisbeto

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

@@ -194,6 +194,8 @@ describe('Overlay directives', () => {
       fixture.detectChanges();
 
       fixture.componentInstance.offsetX = 15;
+      fixture.detectChanges();
+
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
@@ -223,6 +225,8 @@ describe('Overlay directives', () => {
       fixture.detectChanges();
 
       fixture.componentInstance.offsetY = 55;
+      fixture.detectChanges();
+
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
       expect(pane.style.top)

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

@@ -10,6 +10,8 @@ import {
     Output,
     ElementRef,
     Renderer2,
+    OnChanges,
+    SimpleChanges,
 } from '@angular/core';
 import {Overlay, OVERLAY_PROVIDERS} from './overlay';
 import {OverlayRef} from './overlay-ref';
@@ -63,10 +65,9 @@ export class OverlayOrigin {
   selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
   exportAs: 'cdkConnectedOverlay'
 })
-export class ConnectedOverlayDirective implements OnDestroy {
+export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   private _overlayRef: OverlayRef;
   private _templatePortal: TemplatePortal;
-  private _open = false;
   private _hasBackdrop = false;
   private _backdropSubscription: Subscription;
   private _positionSubscription: Subscription;
@@ -125,6 +126,9 @@ export class ConnectedOverlayDirective implements OnDestroy {
   /** Strategy to be used when handling scroll events while the overlay is open. */
   @Input() scrollStrategy: ScrollStrategy = new RepositionScrollStrategy(this._scrollDispatcher);
 
+  /** Whether the overlay is open. */
+  @Input() open: boolean = false;
+
   /** Whether or not the overlay should attach a backdrop. */
   @Input()
   get hasBackdrop() {
@@ -135,16 +139,6 @@ export class ConnectedOverlayDirective implements OnDestroy {
     this._hasBackdrop = coerceBooleanProperty(value);
   }
 
-  @Input()
-  get open() {
-    return this._open;
-  }
-
-  set open(value: boolean) {
-    value ? this._attachOverlay() : this._detachOverlay();
-    this._open = value;
-  }
-
   /** Event emitted when the backdrop is clicked. */
   @Output() backdropClick = new EventEmitter<void>();
 
@@ -183,6 +177,12 @@ export class ConnectedOverlayDirective implements OnDestroy {
     this._destroyOverlay();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['open']) {
+      changes['open'].currentValue ? this._attachOverlay() : this._detachOverlay();
+    }
+  }
+
   /** Creates an overlay */
   private _createOverlay() {
     if (!this.positions || !this.positions.length) {