diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index 8d0e75615be4..4758d432ed9f 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -140,6 +140,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.width).toEqual('250px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.width = 500; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.width).toEqual('500px'); }); it('should set the height', () => { @@ -149,6 +158,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.height).toEqual('100vh'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.height = '50vh'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.height).toEqual('50vh'); }); it('should set the min width', () => { @@ -158,6 +176,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minWidth).toEqual('250px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.minWidth = 500; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.minWidth).toEqual('500px'); }); it('should set the min height', () => { @@ -167,6 +194,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minHeight).toEqual('500px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.minHeight = '250px'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.minHeight).toEqual('250px'); }); it('should create the backdrop if designated', () => { diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index 7d4c7bc748a0..5eafb2a89a82 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -385,6 +385,14 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { this._detachOverlay(); } }); + } else { + // Update the overlay size, in case the directive's inputs have changed + this._overlayRef.updateSize({ + width: this.width, + minWidth: this.minWidth, + height: this.height, + minHeight: this.minHeight, + }); } this._position.withDirection(this.dir);