feat(dialog): support adding/removing panelClasses to open dialogRef

Fixes angular#6206

src/cdk/overlay/overlay-ref.ts

@@ -309,6 +309,20 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     this._updateElementDirection();
   }
 
+  /** Add a CSS class or an array of classes to the overlay pane. */
+  addPanelClass(classes: string | string[]) {
+    if (this._pane) {
+      this._toggleClasses(this._pane, classes, true);
+    }
+  }
+
+  /** Remove a CSS class or an array of classes from the overlay pane. */
+  removePanelClass(classes: string | string[]) {
+    if (this._pane) {
+      this._toggleClasses(this._pane, classes, false);
+    }
+  }
+
   /**
    * Returns the layout direction of the overlay panel.
    */

src/cdk/overlay/overlay.spec.ts

@@ -398,6 +398,26 @@ describe('Overlay', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
+  it('should add and remove classes while open', () => {
+    let overlayRef = overlay.create();
+    overlayRef.attach(componentPortal);
+
+    const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    expect(pane.classList)
+      .not.toContain('custom-class-one', 'Expected class to be initially missing');
+
+    overlayRef.addPanelClass('custom-class-one');
+    expect(pane.classList).toContain('custom-class-one', 'Expected class to be added');
+
+    overlayRef.removePanelClass('custom-class-one');
+    expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed');
+
+    // Destroy the overlay and make sure no errors are thrown when trying to alter
+    // panel classes
+    overlayRef.dispose();
+    expect(() => overlayRef.addPanelClass('custom-class-two')).not.toThrowError();
+  });
+
   describe('positioning', () => {
     let config: OverlayConfig;
 

src/dev-app/dialog/dialog-demo.html

@@ -123,5 +123,5 @@ <h2>Other options</h2>
 
   <p> {{ data.message }} </p>
   <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
-  <button (click)="dialogRef.updateSize('500px', '500px').updatePosition({ top: '25px', left: '25px' });">Change dimensions</button>`
+  <button (click)="dialogRef.updateSize('500px', '500px').updatePosition({ top: '25px', left: '25px' });">Change dimensions</button>
 </ng-template>

src/dev-app/dialog/dialog-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Component, Inject, TemplateRef, ViewChild} from '@angular/core';
+import {Component, Inject, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material';
 
 
@@ -101,8 +101,11 @@ export class DialogDemo {
       <p cdkDragHandle> {{ data.message }} </p>
       <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
       <button (click)="togglePosition()">Change dimensions</button>
+      <button (click)="temporarilyHide()">Hide for 2 seconds</button>
     </div>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styles: [`.hidden-dialog { opacity: 0; }`]
 })
 export class JazzDialog {
   private _dimesionToggle = false;
@@ -124,6 +127,13 @@ export class JazzDialog {
         .updatePosition();
     }
   }
+
+  temporarilyHide(): void {
+    this.dialogRef.addPanelClass('hidden-dialog');
+    setTimeout(() => {
+      this.dialogRef.removePanelClass('hidden-dialog');
+    }, 2000);
+  }
 }
 
 

src/lib/dialog/dialog-ref.ts

@@ -173,6 +173,18 @@ export class MatDialogRef<T, R = any> {
     return this;
   }
 
+  /** Add a CSS class or an array of classes to the overlay pane. */
+  addPanelClass(classes: string | string[]): this {
+    this._overlayRef.addPanelClass(classes);
+    return this;
+  }
+
+  /** Remove a CSS class or an array of classes from the overlay pane. */
+  removePanelClass(classes: string | string[]): this {
+    this._overlayRef.removePanelClass(classes);
+    return this;
+  }
+
   /**
    * Gets an observable that is notified when the dialog is finished opening.
    * @deprecated Use `afterOpened` instead.

src/lib/dialog/dialog.spec.ts

@@ -830,6 +830,23 @@ describe('MatDialog', () => {
     sibling.parentNode!.removeChild(sibling);
   }));
 
+  it('should add and remove classes while open', () => {
+    let dialogRef = dialog.open(PizzaMsg, {
+      disableClose: true,
+      viewContainerRef: testViewContainerRef
+    });
+
+    const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    expect(pane.classList)
+      .not.toContain('custom-class-one', 'Expected class to be initially missing');
+
+    dialogRef.addPanelClass('custom-class-one');
+    expect(pane.classList).toContain('custom-class-one', 'Expected class to be added');
+
+    dialogRef.removePanelClass('custom-class-one');
+    expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed');
+  });
+
   describe('disableClose option', () => {
     it('should prevent closing via clicks on the backdrop', fakeAsync(() => {
       dialog.open(PizzaMsg, {