From c101f7ff75acdd624e1e599f1f33a67252e36558 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date: Fri, 25 Dec 2020 16:15:01 +0100
Subject: [PATCH 1/7] fix(material/dialog): make align attribute into an input
 of dialog actions directive instead of css

Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
sense to assume end users to know they can use the align attribute.

Fixes #18479
---
 src/dev-app/dialog/dialog-demo.ts             | 18 +++++++--------
 .../dialog/dialog-content-directives.ts       | 22 ++++++++++++-------
 src/material/dialog/dialog.scss               | 11 +++++-----
 src/material/dialog/dialog.spec.ts            | 12 ++++++++--
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 5223f841c918..7a28213edfad 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -22,7 +22,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -110,20 +110,20 @@ export class JazzDialog {
   private _dimesionToggle = false;
 
   constructor(
-    public dialogRef: MatDialogRef<JazzDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+      public dialogRef: MatDialogRef<JazzDialog>,
+      @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   togglePosition(): void {
     this._dimesionToggle = !this._dimesionToggle;
 
     if (this._dimesionToggle) {
       this.dialogRef
-        .updateSize('500px', '500px')
-        .updatePosition({ top: '25px', left: '25px' });
+      .updateSize('500px', '500px')
+      .updatePosition({ top: '25px', left: '25px' });
     } else {
       this.dialogRef
-        .updateSize()
-        .updatePosition();
+      .updateSize()
+      .updatePosition();
     }
   }
 
@@ -160,7 +160,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -181,7 +181,7 @@ export class JazzDialog {
   `
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
 
   constructor(public dialog: MatDialog) { }
 
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 73121c0cc08e..a4ab16b3d9ee 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -77,7 +77,7 @@ export class MatDialogClose implements OnInit, OnChanges {
     // dialog, and therefore clicking the button won't result in a focus change. This means that
     // the FocusMonitor won't detect any origin change, and will always output `program`.
     _closeDialogVia(this.dialogRef,
-        event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
+      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
   }
 }
 
@@ -96,11 +96,11 @@ export class MatDialogTitle implements OnInit {
   @Input() id: string = `mat-dialog-title-${dialogElementUid++}`;
 
   constructor(
-      // The dialog title directive is always used in combination with a `MatDialogRef`.
-      // tslint:disable-next-line: lightweight-tokens
-      @Optional() private _dialogRef: MatDialogRef<any>,
-      private _elementRef: ElementRef<HTMLElement>,
-      private _dialog: MatDialog) {}
+    // The dialog title directive is always used in combination with a `MatDialogRef`.
+    // tslint:disable-next-line: lightweight-tokens
+    @Optional() private _dialogRef: MatDialogRef<any>,
+    private _elementRef: ElementRef<HTMLElement>,
+    private _dialog: MatDialog) {}
 
   ngOnInit() {
     if (!this._dialogRef) {
@@ -136,9 +136,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'}
+  host: {
+    'class': 'mat-dialog-actions',
+    '[class.mat-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-dialog-actions-align-end]': 'align === "end"'
+  }
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'center' | 'end' = undefined;
+}
 
 
 /**
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index a7db73658d5e..473abc4b1e65 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -57,13 +57,14 @@ $mat-dialog-button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$mat-dialog-padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .align-center and .align-end are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 8a8a8e6edb26..cd7c1e72a571 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1493,6 +1493,14 @@ describe('MatDialog', () => {
         expect(container.getAttribute('aria-labelledby'))
             .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
       }));
+
+      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions =
+          overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions).not.toHaveClass('mat-dialog-actions-align-center', 'Expected action buttons to not have class align-center');
+        expect(actions).toHaveClass('mat-dialog-actions-align-end', 'Expected action buttons to have class align-end');
+      });
     }
   });
 
@@ -1876,7 +1884,7 @@ class PizzaMsg {
   template: `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-    <mat-dialog-actions>
+    <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
       <button
@@ -1895,7 +1903,7 @@ class ContentElementDialog {}
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-      <mat-dialog-actions>
+      <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
         <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
         <button

From 462d407b185348404af2b5db8095f069a01b54b5 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date: Fri, 25 Dec 2020 16:18:08 +0100
Subject: [PATCH 2/7] fix(material-experimental/mdc-dialog): make align attr
 into an input of dialog actions directive

Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
sense to assume end users to know they can use the align attribute.

Fixes #18479 for material-experimental
---
 .../mdc-dialog/dialog-content-directives.ts   |    6 +-
 .../mdc-dialog/dialog.scss                    |   10 +-
 .../mdc-dialog/dialog.spec.ts                 |  421 ++--
 src/material/dialog/dialog.spec.ts            | 1885 ++++++++---------
 tools/public_api_guard/material/dialog.d.ts   |    3 +-
 5 files changed, 1112 insertions(+), 1213 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index a6d74417c8bf..a9c2b29b084d 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -139,9 +139,13 @@ export class MatDialogContent {
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'}
+  host: {
+    'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
+    '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"'}
 })
 export class MatDialogActions {
+  @Input() align?: 'center' | 'end' = undefined;
 }
 
 
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index cadf6ddd80cb..ae87f83641ff 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -34,13 +34,13 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   // aligns actions at the end of the container.
   justify-content: start;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .align-center and .align-end are set by directive input "align"
+  &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   // MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
   // class applied. We can't set this class for projected buttons that consumers of the
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index 4a29c4953bb1..1add9a452b58 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -36,13 +36,14 @@ import {
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {numbers} from '@material/dialog';
 import {Subject} from 'rxjs';
+
 import {
+  MAT_DIALOG_DATA,
+  MAT_DIALOG_DEFAULT_OPTIONS,
   MatDialog,
   MatDialogModule,
   MatDialogRef,
-  MatDialogState,
-  MAT_DIALOG_DATA,
-  MAT_DIALOG_DEFAULT_OPTIONS
+  MatDialogState
 } from './index';
 
 describe('MDC-based MatDialog', () => {
@@ -58,32 +59,26 @@ describe('MDC-based MatDialog', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      providers: [
-        {provide: Location, useClass: SpyLocation},
-        {
-          provide: ScrollDispatcher,
-          useFactory: () => ({scrolled: () => scrolledSubject})
-        },
+      imports : [ MatDialogModule, DialogTestModule ],
+      providers : [
+        {provide : Location, useClass : SpyLocation},
+        {provide : ScrollDispatcher, useFactory : () => ({scrolled : () => scrolledSubject})},
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject(
-      [MatDialog, Location, OverlayContainer, FocusMonitor],
-      (d: MatDialog, l: Location, oc: OverlayContainer, fm: FocusMonitor) => {
-        dialog = d;
-        mockLocation = l as SpyLocation;
-        overlayContainer = oc;
-        overlayContainerElement = oc.getContainerElement();
-        focusMonitor = fm;
-      }));
+  beforeEach(inject([ MatDialog, Location, OverlayContainer, FocusMonitor ],
+                    (d: MatDialog, l: Location, oc: OverlayContainer, fm: FocusMonitor) => {
+                      dialog = d;
+                      mockLocation = l as SpyLocation;
+                      overlayContainer = oc;
+                      overlayContainerElement = oc.getContainerElement();
+                      focusMonitor = fm;
+                    }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   beforeEach(() => {
     viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
@@ -93,7 +88,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should open a dialog with a component', () => {
-    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
@@ -111,7 +106,7 @@ describe('MDC-based MatDialog', () => {
     templateRefFixture.componentInstance.localValue = 'Bees';
     templateRefFixture.detectChanges();
 
-    const data = {value: 'Knees'};
+    const data = {value : 'Knees'};
 
     let dialogRef = dialog.open(templateRefFixture.componentInstance.templateRef, {data});
 
@@ -129,22 +124,22 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should emit when dialog opening animation is complete', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    const spy = jasmine.createSpy('afterOpen spy');
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       const spy = jasmine.createSpy('afterOpen spy');
 
-    dialogRef.afterOpened().subscribe(spy);
+       dialogRef.afterOpened().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    // callback should not be called before animation is complete
-    expect(spy).not.toHaveBeenCalled();
+       // callback should not be called before animation is complete
+       expect(spy).not.toHaveBeenCalled();
 
-    flushMicrotasks();
-    expect(spy).toHaveBeenCalled();
-  }));
+       flushMicrotasks();
+       expect(spy).toHaveBeenCalled();
+     }));
 
   it('should use injector from viewContainerRef for DialogInjector', () => {
-    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
@@ -153,7 +148,7 @@ describe('MDC-based MatDialog', () => {
     expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef);
     expect(dialogInjector.get<DirectiveWithViewContainer>(DirectiveWithViewContainer))
         .toBeTruthy('Expected the dialog component to be created with the injector from ' +
-          'the viewContainerRef.');
+                    'the viewContainerRef.');
   });
 
   it('should open a dialog with a component and no ViewContainerRef', () => {
@@ -171,7 +166,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should apply the configured role to the dialog element', () => {
-    dialog.open(PizzaMsg, {role: 'alertdialog'});
+    dialog.open(PizzaMsg, {role : 'alertdialog'});
 
     viewContainerFixture.detectChanges();
 
@@ -180,7 +175,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should apply the specified `aria-describedby`', () => {
-    dialog.open(PizzaMsg, {ariaDescribedBy: 'description-element'});
+    dialog.open(PizzaMsg, {ariaDescribedBy : 'description-element'});
 
     viewContainerFixture.detectChanges();
 
@@ -189,7 +184,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should close a dialog and get back a result', fakeAsync(() => {
-       let dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        let afterCloseCallback = jasmine.createSpy('afterClose callback');
 
        dialogRef.afterClosed().subscribe(afterCloseCallback);
@@ -202,7 +197,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should dispose of dialog if view container is destroyed while animating', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        dialogRef.close();
        viewContainerFixture.detectChanges();
@@ -214,10 +209,10 @@ describe('MDC-based MatDialog', () => {
 
   it('should dispatch the beforeClosed and afterClosed events when the ' +
          'overlay is detached externally',
-     fakeAsync(inject([Overlay], (overlay: Overlay) => {
+     fakeAsync(inject([ Overlay ], (overlay: Overlay) => {
        const dialogRef = dialog.open(PizzaMsg, {
-         viewContainerRef: testViewContainerRef,
-         scrollStrategy: overlay.scrollStrategies.close()
+         viewContainerRef : testViewContainerRef,
+         scrollStrategy : overlay.scrollStrategies.close()
        });
        const beforeClosedCallback = jasmine.createSpy('beforeClosed callback');
        const afterCloseCallback = jasmine.createSpy('afterClosed callback');
@@ -234,7 +229,7 @@ describe('MDC-based MatDialog', () => {
      })));
 
   it('should close a dialog and get back a result before it is closed', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        flush();
        viewContainerFixture.detectChanges();
@@ -255,7 +250,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should close a dialog via the escape key', fakeAsync(() => {
-       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
        viewContainerFixture.detectChanges();
@@ -266,9 +261,9 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should not close a dialog via the escape key with a modifier', fakeAsync(() => {
-       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-       const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt: true});
+       const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt : true});
        dispatchEvent(document.body, event);
        viewContainerFixture.detectChanges();
        flush();
@@ -283,7 +278,7 @@ describe('MDC-based MatDialog', () => {
        onPushFixture.detectChanges();
 
        const dialogRef = dialog.open(
-           PizzaMsg, {viewContainerRef: onPushFixture.componentInstance.viewContainerRef});
+           PizzaMsg, {viewContainerRef : onPushFixture.componentInstance.viewContainerRef});
 
        flushMicrotasks();
        onPushFixture.detectChanges();
@@ -302,7 +297,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
-       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        viewContainerFixture.detectChanges();
 
@@ -316,7 +311,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should emit the backdropClick stream when clicking on the overlay backdrop', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        const spy = jasmine.createSpy('backdropClick spy');
        dialogRef.backdropClick().subscribe(spy);
@@ -337,7 +332,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should emit the keyboardEvent stream when key events target the overlay', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
        const spy = jasmine.createSpy('keyboardEvent spy');
        dialogRef.keydownEvents().subscribe(spy);
@@ -356,13 +351,13 @@ describe('MDC-based MatDialog', () => {
 
   it('should notify the observers if a dialog has been opened', () => {
     dialog.afterOpened.subscribe(ref => {
-      expect(dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef})).toBe(ref);
+      expect(dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef})).toBe(ref);
     });
   });
 
   it('should notify the observers if all open dialogs have finished closing', fakeAsync(() => {
-       const ref1 = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-       const ref2 = dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+       const ref1 = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       const ref2 = dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
        const spy = jasmine.createSpy('afterAllClosed spy');
 
        dialog.afterAllClosed.subscribe(spy);
@@ -388,7 +383,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the width of the overlay pane', () => {
-    dialog.open(PizzaMsg, {width: '500px'});
+    dialog.open(PizzaMsg, {width : '500px'});
 
     viewContainerFixture.detectChanges();
 
@@ -398,7 +393,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {height: '100px'});
+    dialog.open(PizzaMsg, {height : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -408,7 +403,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the min-width of the overlay pane', () => {
-    dialog.open(PizzaMsg, {minWidth: '500px'});
+    dialog.open(PizzaMsg, {minWidth : '500px'});
 
     viewContainerFixture.detectChanges();
 
@@ -433,7 +428,7 @@ describe('MDC-based MatDialog', () => {
        viewContainerFixture.detectChanges();
        flushMicrotasks();
 
-       dialogRef = dialog.open(PizzaMsg, {maxWidth: '100px'});
+       dialogRef = dialog.open(PizzaMsg, {maxWidth : '100px'});
 
        viewContainerFixture.detectChanges();
 
@@ -443,7 +438,7 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should override the min-height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {minHeight: '300px'});
+    dialog.open(PizzaMsg, {minHeight : '300px'});
 
     viewContainerFixture.detectChanges();
 
@@ -453,7 +448,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the max-height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {maxHeight: '100px'});
+    dialog.open(PizzaMsg, {maxHeight : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -463,7 +458,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the top offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {position: {top: '100px'}});
+    dialog.open(PizzaMsg, {position : {top : '100px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -473,7 +468,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the bottom offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {position: {bottom: '200px'}});
+    dialog.open(PizzaMsg, {position : {bottom : '200px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -483,7 +478,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the left offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {position: {left: '250px'}});
+    dialog.open(PizzaMsg, {position : {left : '250px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -493,7 +488,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should override the right offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {position: {right: '125px'}});
+    dialog.open(PizzaMsg, {position : {right : '125px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -503,7 +498,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should allow for the position to be updated', () => {
-    let dialogRef = dialog.open(PizzaMsg, {position: {left: '250px'}});
+    let dialogRef = dialog.open(PizzaMsg, {position : {left : '250px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -511,13 +506,13 @@ describe('MDC-based MatDialog', () => {
 
     expect(overlayPane.style.marginLeft).toBe('250px');
 
-    dialogRef.updatePosition({left: '500px'});
+    dialogRef.updatePosition({left : '500px'});
 
     expect(overlayPane.style.marginLeft).toBe('500px');
   });
 
   it('should allow for the dimensions to be updated', () => {
-    let dialogRef = dialog.open(PizzaMsg, {width: '100px'});
+    let dialogRef = dialog.open(PizzaMsg, {width : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -552,7 +547,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should allow setting the layout direction', () => {
-    dialog.open(PizzaMsg, {direction: 'rtl'});
+    dialog.open(PizzaMsg, {direction : 'rtl'});
 
     viewContainerFixture.detectChanges();
 
@@ -562,7 +557,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should inject the correct layout direction in the component instance', () => {
-    const dialogRef = dialog.open(PizzaMsg, {direction: 'rtl'});
+    const dialogRef = dialog.open(PizzaMsg, {direction : 'rtl'});
 
     viewContainerFixture.detectChanges();
 
@@ -578,7 +573,7 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should use the passed in ViewContainerRef from the config', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        viewContainerFixture.detectChanges();
        flush();
 
@@ -649,9 +644,9 @@ describe('MDC-based MatDialog', () => {
   it('should complete open and close streams when the injectable is destroyed', fakeAsync(() => {
        const afterOpenedSpy = jasmine.createSpy('after opened spy');
        const afterAllClosedSpy = jasmine.createSpy('after all closed spy');
-       const afterOpenedSubscription = dialog.afterOpened.subscribe({complete: afterOpenedSpy});
+       const afterOpenedSubscription = dialog.afterOpened.subscribe({complete : afterOpenedSpy});
        const afterAllClosedSubscription =
-           dialog.afterAllClosed.subscribe({complete: afterAllClosedSpy});
+           dialog.afterAllClosed.subscribe({complete : afterAllClosedSpy});
 
        dialog.ngOnDestroy();
 
@@ -664,7 +659,7 @@ describe('MDC-based MatDialog', () => {
 
   it('should allow the consumer to disable closing a dialog on navigation', fakeAsync(() => {
        dialog.open(PizzaMsg);
-       dialog.open(PizzaMsg, {closeOnNavigation: false});
+       dialog.open(PizzaMsg, {closeOnNavigation : false});
 
        expect(overlayContainerElement.querySelectorAll('mat-mdc-dialog-container').length).toBe(2);
 
@@ -701,9 +696,9 @@ describe('MDC-based MatDialog', () => {
 
   it('should be able to attach a custom scroll strategy', fakeAsync(() => {
        const scrollStrategy: ScrollStrategy = {
-         attach: () => {},
-         enable: jasmine.createSpy('scroll strategy enable spy'),
-         disable: () => {}
+         attach : () => {},
+         enable : jasmine.createSpy('scroll strategy enable spy'),
+         disable : () => {}
        };
 
        dialog.open(PizzaMsg, {scrollStrategy});
@@ -711,11 +706,11 @@ describe('MDC-based MatDialog', () => {
      }));
 
   it('should be able to pass in an alternate ComponentFactoryResolver',
-     inject([ComponentFactoryResolver], (resolver: ComponentFactoryResolver) => {
+     inject([ ComponentFactoryResolver ], (resolver: ComponentFactoryResolver) => {
        spyOn(resolver, 'resolveComponentFactory').and.callThrough();
 
-       dialog.open(
-           PizzaMsg, {viewContainerRef: testViewContainerRef, componentFactoryResolver: resolver});
+       dialog.open(PizzaMsg,
+                   {viewContainerRef : testViewContainerRef, componentFactoryResolver : resolver});
        viewContainerFixture.detectChanges();
 
        expect(resolver.resolveComponentFactory).toHaveBeenCalled();
@@ -723,7 +718,7 @@ describe('MDC-based MatDialog', () => {
 
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
-      let config = {data: {stringParam: 'hello', dateParam: new Date()}};
+      let config = {data : {stringParam : 'hello', dateParam : new Date()}};
 
       let instance = dialog.open(DialogWithInjectedData, config).componentInstance;
 
@@ -761,17 +756,17 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should allow for the id to be overwritten', () => {
-    const dialogRef = dialog.open(PizzaMsg, {id: 'pizza'});
+    const dialogRef = dialog.open(PizzaMsg, {id : 'pizza'});
     expect(dialogRef.id).toBe('pizza');
   });
 
   it('should throw when trying to open a dialog with the same id as another dialog', () => {
-    dialog.open(PizzaMsg, {id: 'pizza'});
-    expect(() => dialog.open(PizzaMsg, {id: 'pizza'})).toThrowError(/must be unique/g);
+    dialog.open(PizzaMsg, {id : 'pizza'});
+    expect(() => dialog.open(PizzaMsg, {id : 'pizza'})).toThrowError(/must be unique/g);
   });
 
   it('should be able to find a dialog by id', () => {
-    const dialogRef = dialog.open(PizzaMsg, {id: 'pizza'});
+    const dialogRef = dialog.open(PizzaMsg, {id : 'pizza'});
     expect(dialog.getDialogById('pizza')).toBe(dialogRef);
   });
 
@@ -779,7 +774,7 @@ describe('MDC-based MatDialog', () => {
        const sibling = document.createElement('div');
        overlayContainerElement.parentNode!.appendChild(sibling);
 
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        viewContainerFixture.detectChanges();
        flush();
 
@@ -802,7 +797,7 @@ describe('MDC-based MatDialog', () => {
        sibling.setAttribute('aria-hidden', 'true');
        overlayContainerElement.parentNode!.appendChild(sibling);
 
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        viewContainerFixture.detectChanges();
        flush();
 
@@ -823,7 +818,7 @@ describe('MDC-based MatDialog', () => {
        sibling.setAttribute('aria-live', 'polite');
        overlayContainerElement.parentNode!.appendChild(sibling);
 
-       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        viewContainerFixture.detectChanges();
        flush();
 
@@ -834,7 +829,7 @@ describe('MDC-based MatDialog', () => {
 
   it('should add and remove classes while open', () => {
     let dialogRef =
-        dialog.open(PizzaMsg, {disableClose: true, viewContainerRef: testViewContainerRef});
+        dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
     const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
     expect(pane.classList)
@@ -849,7 +844,7 @@ describe('MDC-based MatDialog', () => {
 
   describe('disableClose option', () => {
     it('should prevent closing via clicks on the backdrop', fakeAsync(() => {
-         dialog.open(PizzaMsg, {disableClose: true, viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
          viewContainerFixture.detectChanges();
 
@@ -863,7 +858,7 @@ describe('MDC-based MatDialog', () => {
        }));
 
     it('should prevent closing via the escape key', fakeAsync(() => {
-         dialog.open(PizzaMsg, {disableClose: true, viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
          viewContainerFixture.detectChanges();
          dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
@@ -875,7 +870,7 @@ describe('MDC-based MatDialog', () => {
 
     it('should allow for the disableClose option to be updated while open', fakeAsync(() => {
          let dialogRef =
-             dialog.open(PizzaMsg, {disableClose: true, viewContainerRef: testViewContainerRef});
+             dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
          viewContainerFixture.detectChanges();
 
@@ -894,7 +889,7 @@ describe('MDC-based MatDialog', () => {
        }));
 
     it('should recapture focus when clicking on the backdrop', fakeAsync(() => {
-         dialog.open(PizzaMsg, {disableClose: true, viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
          viewContainerFixture.detectChanges();
          flushMicrotasks();
@@ -905,7 +900,7 @@ describe('MDC-based MatDialog', () => {
 
          expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
 
-         input.blur();  // Programmatic clicks might not move focus so we simulate it.
+         input.blur(); // Programmatic clicks might not move focus so we simulate it.
          backdrop.click();
          viewContainerFixture.detectChanges();
          flush();
@@ -918,7 +913,7 @@ describe('MDC-based MatDialog', () => {
        fakeAsync(() => {
          dialog.open(
              PizzaMsg,
-             {disableClose: true, viewContainerRef: testViewContainerRef, autoFocus: false});
+             {disableClose : true, viewContainerRef : testViewContainerRef, autoFocus : false});
 
          viewContainerFixture.detectChanges();
          flushMicrotasks();
@@ -930,7 +925,7 @@ describe('MDC-based MatDialog', () => {
 
          expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
 
-         container.blur();  // Programmatic clicks might not move focus so we simulate it.
+         container.blur(); // Programmatic clicks might not move focus so we simulate it.
          backdrop.click();
          viewContainerFixture.detectChanges();
          flush();
@@ -942,7 +937,7 @@ describe('MDC-based MatDialog', () => {
 
   describe('hasBackdrop option', () => {
     it('should have a backdrop', () => {
-      dialog.open(PizzaMsg, {hasBackdrop: true, viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg, {hasBackdrop : true, viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -950,7 +945,7 @@ describe('MDC-based MatDialog', () => {
     });
 
     it('should not have a backdrop', () => {
-      dialog.open(PizzaMsg, {hasBackdrop: false, viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg, {hasBackdrop : false, viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -960,8 +955,8 @@ describe('MDC-based MatDialog', () => {
 
   describe('panelClass option', () => {
     it('should have custom panel class', () => {
-      dialog.open(
-          PizzaMsg, {panelClass: 'custom-panel-class', viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg,
+                  {panelClass : 'custom-panel-class', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -971,7 +966,7 @@ describe('MDC-based MatDialog', () => {
 
   describe('backdropClass option', () => {
     it('should have default backdrop class', () => {
-      dialog.open(PizzaMsg, {backdropClass: '', viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg, {backdropClass : '', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -981,7 +976,7 @@ describe('MDC-based MatDialog', () => {
     it('should have custom backdrop class', () => {
       dialog.open(
           PizzaMsg,
-          {backdropClass: 'custom-backdrop-class', viewContainerRef: testViewContainerRef});
+          {backdropClass : 'custom-backdrop-class', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -995,7 +990,7 @@ describe('MDC-based MatDialog', () => {
     afterEach(() => document.body.removeChild(overlayContainerElement));
 
     it('should focus the first tabbable element of the dialog on open', fakeAsync(() => {
-         dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          viewContainerFixture.detectChanges();
          flushMicrotasks();
@@ -1005,7 +1000,7 @@ describe('MDC-based MatDialog', () => {
        }));
 
     it('should allow disabling focus of the first tabbable element', fakeAsync(() => {
-         dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef, autoFocus: false});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, autoFocus : false});
 
          viewContainerFixture.detectChanges();
          flushMicrotasks();
@@ -1014,7 +1009,7 @@ describe('MDC-based MatDialog', () => {
        }));
 
     it('should attach the focus trap even if automatic focus is disabled', fakeAsync(() => {
-         dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef, autoFocus: false});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, autoFocus : false});
 
          viewContainerFixture.detectChanges();
          flushMicrotasks();
@@ -1030,7 +1025,7 @@ describe('MDC-based MatDialog', () => {
          document.body.appendChild(button);
          button.focus();
 
-         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          flushMicrotasks();
          viewContainerFixture.detectChanges();
@@ -1041,18 +1036,16 @@ describe('MDC-based MatDialog', () => {
 
          dialogRef.close();
          expect(document.activeElement!.id)
-             .not.toBe(
-                 'dialog-trigger',
-                 'Expcted the focus not to have changed before the animation finishes.');
+             .not.toBe('dialog-trigger',
+                       'Expcted the focus not to have changed before the animation finishes.');
 
          flushMicrotasks();
          viewContainerFixture.detectChanges();
          tick(500);
 
          expect(document.activeElement!.id)
-             .toBe(
-                 'dialog-trigger',
-                 'Expected that the trigger was refocused after the dialog is closed.');
+             .toBe('dialog-trigger',
+                   'Expected that the trigger was refocused after the dialog is closed.');
 
          document.body.removeChild(button);
        }));
@@ -1072,7 +1065,7 @@ describe('MDC-based MatDialog', () => {
          // element.
          patchElementFocus(button);
 
-         dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          tick(500);
          viewContainerFixture.detectChanges();
@@ -1106,7 +1099,7 @@ describe('MDC-based MatDialog', () => {
          // element.
          patchElementFocus(button);
 
-         dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          tick(500);
          viewContainerFixture.detectChanges();
@@ -1142,7 +1135,7 @@ describe('MDC-based MatDialog', () => {
          // element.
          patchElementFocus(button);
 
-         dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+         dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
 
          tick(500);
          viewContainerFixture.detectChanges();
@@ -1180,7 +1173,7 @@ describe('MDC-based MatDialog', () => {
          // element.
          patchElementFocus(button);
 
-         dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+         dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
 
          tick(500);
          viewContainerFixture.detectChanges();
@@ -1216,7 +1209,7 @@ describe('MDC-based MatDialog', () => {
          document.body.appendChild(input);
          button.focus();
 
-         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          tick(500);
          viewContainerFixture.detectChanges();
@@ -1229,9 +1222,8 @@ describe('MDC-based MatDialog', () => {
          flush();
 
          expect(document.activeElement!.id)
-             .toBe(
-                 'input-to-be-focused',
-                 'Expected that the trigger was refocused after the dialog is closed.');
+             .toBe('input-to-be-focused',
+                   'Expected that the trigger was refocused after the dialog is closed.');
 
          document.body.removeChild(button);
          document.body.removeChild(input);
@@ -1257,7 +1249,7 @@ describe('MDC-based MatDialog', () => {
          button.focus();
 
          const dialogRef =
-             dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef, restoreFocus: false});
+             dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, restoreFocus : false});
 
          flushMicrotasks();
          viewContainerFixture.detectChanges();
@@ -1288,7 +1280,7 @@ describe('MDC-based MatDialog', () => {
          body.appendChild(otherButton);
          button.focus();
 
-         const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
          flushMicrotasks();
          viewContainerFixture.detectChanges();
@@ -1321,7 +1313,7 @@ describe('MDC-based MatDialog', () => {
 
     describe('inside component dialog', () => {
       beforeEach(fakeAsync(() => {
-        dialogRef = dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+        dialogRef = dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
         viewContainerFixture.detectChanges();
         flush();
       }));
@@ -1334,8 +1326,8 @@ describe('MDC-based MatDialog', () => {
         const fixture = TestBed.createComponent(ComponentWithContentElementTemplateRef);
         fixture.detectChanges();
 
-        dialogRef = dialog.open(
-            fixture.componentInstance.templateRef, {viewContainerRef: testViewContainerRef});
+        dialogRef = dialog.open(fixture.componentInstance.templateRef,
+                                {viewContainerRef : testViewContainerRef});
 
         viewContainerFixture.detectChanges();
         flush();
@@ -1408,13 +1400,24 @@ describe('MDC-based MatDialog', () => {
            expect(container.getAttribute('aria-labelledby'))
                .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
          }));
+
+      it('should add align-* class according to given [align] input in [mat-dialog-actions]',
+         () => {
+           let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+           expect(actions).not.toHaveClass(
+               'mat-mdc-dialog-actions-align-center',
+               'Expected action buttons to not have class align-center');
+           expect(actions).toHaveClass('mat-mdc-dialog-actions-align-end',
+                                       'Expected action buttons to have class align-end');
+         });
     }
   });
 
   describe('aria-labelledby', () => {
     it('should be able to set a custom aria-labelledby', () => {
-      dialog.open(
-          PizzaMsg, {ariaLabelledBy: 'Labelled By', viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg,
+                  {ariaLabelledBy : 'Labelled By', viewContainerRef : testViewContainerRef});
       viewContainerFixture.detectChanges();
 
       const container = overlayContainerElement.querySelector('mat-mdc-dialog-container')!;
@@ -1425,9 +1428,9 @@ describe('MDC-based MatDialog', () => {
            'and an aria-labelledby',
        fakeAsync(() => {
          dialog.open(ContentElementDialog, {
-           ariaLabel: 'Hello there',
-           ariaLabelledBy: 'Labelled By',
-           viewContainerRef: testViewContainerRef
+           ariaLabel : 'Hello there',
+           ariaLabelledBy : 'Labelled By',
+           viewContainerRef : testViewContainerRef
          });
          viewContainerFixture.detectChanges();
          tick();
@@ -1440,9 +1443,8 @@ describe('MDC-based MatDialog', () => {
     it('should set the aria-labelledby attribute to the config provided aria-labelledby ' +
            'instead of the mat-dialog-title id',
        fakeAsync(() => {
-         dialog.open(
-             ContentElementDialog,
-             {ariaLabelledBy: 'Labelled By', viewContainerRef: testViewContainerRef});
+         dialog.open(ContentElementDialog,
+                     {ariaLabelledBy : 'Labelled By', viewContainerRef : testViewContainerRef});
          viewContainerFixture.detectChanges();
          flush();
          let title = overlayContainerElement.querySelector('[mat-dialog-title]')!;
@@ -1457,7 +1459,7 @@ describe('MDC-based MatDialog', () => {
 
   describe('aria-label', () => {
     it('should be able to set a custom aria-label', () => {
-      dialog.open(PizzaMsg, {ariaLabel: 'Hello there', viewContainerRef: testViewContainerRef});
+      dialog.open(PizzaMsg, {ariaLabel : 'Hello there', viewContainerRef : testViewContainerRef});
       viewContainerFixture.detectChanges();
 
       const container = overlayContainerElement.querySelector('mat-mdc-dialog-container')!;
@@ -1465,9 +1467,8 @@ describe('MDC-based MatDialog', () => {
     });
 
     it('should not set the aria-labelledby automatically if it has an aria-label', fakeAsync(() => {
-         dialog.open(
-             ContentElementDialog,
-             {ariaLabel: 'Hello there', viewContainerRef: testViewContainerRef});
+         dialog.open(ContentElementDialog,
+                     {ariaLabel : 'Hello there', viewContainerRef : testViewContainerRef});
          viewContainerFixture.detectChanges();
          tick();
          viewContainerFixture.detectChanges();
@@ -1478,19 +1479,19 @@ describe('MDC-based MatDialog', () => {
   });
 
   it('should dispose backdrop if containing dialog view is destroyed', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
+       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
 
-    dialogRef.close();
-    viewContainerFixture.componentInstance.showChildView = false;
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.componentInstance.showChildView = false;
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
-  }));
+       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
+     }));
 });
 
 describe('MDC-based MatDialog with a parent MatDialog', () => {
@@ -1501,24 +1502,24 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      declarations: [ComponentThatProvidesMatDialog],
-      providers: [
+      imports : [ MatDialogModule, DialogTestModule ],
+      declarations : [ ComponentThatProvidesMatDialog ],
+      providers : [
         {
-          provide: OverlayContainer,
-          useFactory: () => {
+          provide : OverlayContainer,
+          useFactory : () => {
             overlayContainerElement = document.createElement('div');
-            return {getContainerElement: () => overlayContainerElement};
+            return {getContainerElement : () => overlayContainerElement};
           }
         },
-        {provide: Location, useClass: SpyLocation}
+        {provide : Location, useClass : SpyLocation}
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog], (d: MatDialog) => {
+  beforeEach(inject([ MatDialog ], (d: MatDialog) => {
     parentDialog = d;
 
     fixture = TestBed.createComponent(ComponentThatProvidesMatDialog);
@@ -1526,9 +1527,7 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
     fixture.detectChanges();
   }));
 
-  afterEach(() => {
-    overlayContainerElement.innerHTML = '';
-  });
+  afterEach(() => { overlayContainerElement.innerHTML = ''; });
 
   it('should close dialogs opened by a parent when calling closeAll on a child MatDialog',
      fakeAsync(() => {
@@ -1600,36 +1599,34 @@ describe('MDC-based MatDialog with default options', () => {
 
   beforeEach(fakeAsync(() => {
     const defaultConfig = {
-      hasBackdrop: false,
-      disableClose: true,
-      width: '100px',
-      height: '100px',
-      minWidth: '50px',
-      minHeight: '50px',
-      maxWidth: '150px',
-      maxHeight: '150px',
-      autoFocus: false,
+      hasBackdrop : false,
+      disableClose : true,
+      width : '100px',
+      height : '100px',
+      minWidth : '50px',
+      minHeight : '50px',
+      maxWidth : '150px',
+      maxHeight : '150px',
+      autoFocus : false,
     };
 
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      providers: [
-        {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: defaultConfig},
+      imports : [ MatDialogModule, DialogTestModule ],
+      providers : [
+        {provide : MAT_DIALOG_DEFAULT_OPTIONS, useValue : defaultConfig},
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, OverlayContainer], (d: MatDialog, oc: OverlayContainer) => {
+  beforeEach(inject([ MatDialog, OverlayContainer ], (d: MatDialog, oc: OverlayContainer) => {
     dialog = d;
     overlayContainer = oc;
     overlayContainerElement = oc.getContainerElement();
   }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   beforeEach(() => {
     viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
@@ -1639,7 +1636,7 @@ describe('MDC-based MatDialog with default options', () => {
   });
 
   it('should use the provided defaults', () => {
-    dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
@@ -1662,7 +1659,7 @@ describe('MDC-based MatDialog with default options', () => {
   it('should be overridable by open() options', fakeAsync(() => {
        dialog.open(
            PizzaMsg,
-           {hasBackdrop: true, disableClose: false, viewContainerRef: testViewContainerRef});
+           {hasBackdrop : true, disableClose : false, viewContainerRef : testViewContainerRef});
 
        viewContainerFixture.detectChanges();
 
@@ -1676,7 +1673,6 @@ describe('MDC-based MatDialog with default options', () => {
      }));
 });
 
-
 describe('MDC-based MatDialog with animations enabled', () => {
   let dialog: MatDialog;
   let overlayContainer: OverlayContainer;
@@ -1686,13 +1682,13 @@ describe('MDC-based MatDialog with animations enabled', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule, BrowserAnimationsModule],
+      imports : [ MatDialogModule, DialogTestModule, BrowserAnimationsModule ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, OverlayContainer], (d: MatDialog, oc: OverlayContainer) => {
+  beforeEach(inject([ MatDialog, OverlayContainer ], (d: MatDialog, oc: OverlayContainer) => {
     dialog = d;
     overlayContainer = oc;
 
@@ -1701,27 +1697,25 @@ describe('MDC-based MatDialog with animations enabled', () => {
     testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
   }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   it('should emit when dialog opening animation is complete', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    const spy = jasmine.createSpy('afterOpen spy');
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       const spy = jasmine.createSpy('afterOpen spy');
 
-    dialogRef.afterOpened().subscribe(spy);
+       dialogRef.afterOpened().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    // callback should not be called before animation is complete
-    expect(spy).not.toHaveBeenCalled();
+       // callback should not be called before animation is complete
+       expect(spy).not.toHaveBeenCalled();
 
-    tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
-    expect(spy).toHaveBeenCalled();
-  }));
+       tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
+       expect(spy).toHaveBeenCalled();
+     }));
 
   it('should return the current state of the dialog', fakeAsync(() => {
-       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
        // Duration of the close animation in milliseconds.
        const dialogCloseDuration = numbers.DIALOG_ANIMATION_CLOSE_TIME_MS;
 
@@ -1744,36 +1738,34 @@ describe('MDC-based MatDialog with animations enabled', () => {
      }));
 });
 
-@Directive({selector: 'dir-with-view-container'})
+@Directive({selector : 'dir-with-view-container'})
 class DirectiveWithViewContainer {
   constructor(public viewContainerRef: ViewContainerRef) {}
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: 'hello',
+  changeDetection : ChangeDetectionStrategy.OnPush,
+  template : 'hello',
 })
 class ComponentWithOnPushViewContainer {
   constructor(public viewContainerRef: ViewContainerRef) {}
 }
 
 @Component({
-  selector: 'arbitrary-component',
-  template: `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
+  selector : 'arbitrary-component',
+  template : `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
 })
 class ComponentWithChildViewContainer {
   showChildView = true;
 
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
-  get childViewContainer() {
-    return this.childWithViewContainer.viewContainerRef;
-  }
+  get childViewContainer() { return this.childWithViewContainer.viewContainerRef; }
 }
 
 @Component({
-  selector: 'arbitrary-component-with-template-ref',
-  template: `<ng-template let-data let-dialogRef="dialogRef">
+  selector : 'arbitrary-component-with-template-ref',
+  template : `<ng-template let-data let-dialogRef="dialogRef">
     Cheese {{localValue}} {{data?.value}}{{setDialogRef(dialogRef)}}</ng-template>`,
 })
 class ComponentWithTemplateRef {
@@ -1789,18 +1781,17 @@ class ComponentWithTemplateRef {
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({template : '<p>Pizza</p> <input> <button>Close</button>'})
 class PizzaMsg {
-  constructor(
-      public dialogRef: MatDialogRef<PizzaMsg>, public dialogInjector: Injector,
-      public directionality: Directionality) {}
+  constructor(public dialogRef: MatDialogRef<PizzaMsg>, public dialogInjector: Injector,
+              public directionality: Directionality) {}
 }
 
 @Component({
-  template: `
+  template : `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-    <mat-dialog-actions>
+    <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
       <button
@@ -1816,11 +1807,11 @@ class ContentElementDialog {
 }
 
 @Component({
-  template: `
+  template : `
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-      <mat-dialog-actions>
+      <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
         <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
         <button
@@ -1837,18 +1828,18 @@ class ComponentWithContentElementTemplateRef {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 }
 
-@Component({template: '', providers: [MatDialog]})
+@Component({template : '', providers : [ MatDialog ]})
 class ComponentThatProvidesMatDialog {
   constructor(public dialog: MatDialog) {}
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({template: ''})
+@Component({template : ''})
 class DialogWithInjectedData {
   constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
 }
 
-@Component({template: '<p>Pasta</p>'})
+@Component({template : '<p>Pasta</p>'})
 class DialogWithoutFocusableElements {
 }
 
@@ -1867,10 +1858,10 @@ const TEST_DIRECTIVES = [
 ];
 
 @NgModule({
-  imports: [MatDialogModule, NoopAnimationsModule],
-  exports: TEST_DIRECTIVES,
-  declarations: TEST_DIRECTIVES,
-  entryComponents: [
+  imports : [ MatDialogModule, NoopAnimationsModule ],
+  exports : TEST_DIRECTIVES,
+  declarations : TEST_DIRECTIVES,
+  entryComponents : [
     ComponentWithChildViewContainer,
     ComponentWithTemplateRef,
     PizzaMsg,
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index cd7c1e72a571..0a918b3a72ce 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1,50 +1,51 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
+import {A, ESCAPE} from '@angular/cdk/keycodes';
+import {Overlay, OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
+import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
-  ComponentFixture,
-  fakeAsync,
-  flushMicrotasks,
-  inject,
-  TestBed,
-  tick,
-  flush,
-} from '@angular/core/testing';
+  createKeyboardEvent,
+  dispatchEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  patchElementFocus
+} from '@angular/cdk/testing/private';
+import {Location} from '@angular/common';
+import {SpyLocation} from '@angular/common/testing';
 import {
   ChangeDetectionStrategy,
   Component,
+  ComponentFactoryResolver,
   Directive,
   Inject,
   Injector,
   NgModule,
   TemplateRef,
   ViewChild,
-  ViewContainerRef,
-  ComponentFactoryResolver
+  ViewContainerRef
 } from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  flushMicrotasks,
+  inject,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Location} from '@angular/common';
-import {SpyLocation} from '@angular/common/testing';
-import {Directionality} from '@angular/cdk/bidi';
+import {Subject} from 'rxjs';
+
 import {MatDialogContainer} from './dialog-container';
-import {OverlayContainer, ScrollStrategy, Overlay} from '@angular/cdk/overlay';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
-import {A, ESCAPE} from '@angular/cdk/keycodes';
-import {
-  dispatchKeyboardEvent,
-  createKeyboardEvent,
-  dispatchEvent,
-  patchElementFocus,
-  dispatchMouseEvent
-} from '@angular/cdk/testing/private';
 import {
   MAT_DIALOG_DATA,
+  MAT_DIALOG_DEFAULT_OPTIONS,
   MatDialog,
   MatDialogModule,
   MatDialogRef,
-  MAT_DIALOG_DEFAULT_OPTIONS,
   MatDialogState
 } from './index';
-import {Subject} from 'rxjs';
 
 describe('MatDialog', () => {
   let dialog: MatDialog;
@@ -59,30 +60,26 @@ describe('MatDialog', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      providers: [
-        {provide: Location, useClass: SpyLocation},
-        {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject
-        })},
+      imports : [ MatDialogModule, DialogTestModule ],
+      providers : [
+        {provide : Location, useClass : SpyLocation},
+        {provide : ScrollDispatcher, useFactory : () => ({scrolled : () => scrolledSubject})},
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, Location, OverlayContainer, FocusMonitor],
-    (d: MatDialog, l: Location, oc: OverlayContainer, fm: FocusMonitor) => {
-      dialog = d;
-      mockLocation = l as SpyLocation;
-      overlayContainer = oc;
-      overlayContainerElement = oc.getContainerElement();
-      focusMonitor = fm;
-  }));
+  beforeEach(inject([ MatDialog, Location, OverlayContainer, FocusMonitor ],
+                    (d: MatDialog, l: Location, oc: OverlayContainer, fm: FocusMonitor) => {
+                      dialog = d;
+                      mockLocation = l as SpyLocation;
+                      overlayContainer = oc;
+                      overlayContainerElement = oc.getContainerElement();
+                      focusMonitor = fm;
+                    }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   beforeEach(() => {
     viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
@@ -92,9 +89,7 @@ describe('MatDialog', () => {
   });
 
   it('should open a dialog with a component', () => {
-    let dialogRef = dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
@@ -112,9 +107,9 @@ describe('MatDialog', () => {
     templateRefFixture.componentInstance.localValue = 'Bees';
     templateRefFixture.detectChanges();
 
-    const data = {value: 'Knees'};
+    const data = {value : 'Knees'};
 
-    let dialogRef = dialog.open(templateRefFixture.componentInstance.templateRef, { data });
+    let dialogRef = dialog.open(templateRefFixture.componentInstance.templateRef, {data});
 
     viewContainerFixture.detectChanges();
 
@@ -130,33 +125,31 @@ describe('MatDialog', () => {
   });
 
   it('should emit when dialog opening animation is complete', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    const spy = jasmine.createSpy('afterOpen spy');
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       const spy = jasmine.createSpy('afterOpen spy');
 
-    dialogRef.afterOpened().subscribe(spy);
+       dialogRef.afterOpened().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    // callback should not be called before animation is complete
-    expect(spy).not.toHaveBeenCalled();
+       // callback should not be called before animation is complete
+       expect(spy).not.toHaveBeenCalled();
 
-    flushMicrotasks();
-    expect(spy).toHaveBeenCalled();
-  }));
+       flushMicrotasks();
+       expect(spy).toHaveBeenCalled();
+     }));
 
   it('should use injector from viewContainerRef for DialogInjector', () => {
-    let dialogRef = dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
     let dialogInjector = dialogRef.componentInstance.dialogInjector;
 
     expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef);
-    expect(dialogInjector.get<DirectiveWithViewContainer>(DirectiveWithViewContainer)).toBeTruthy(
-      'Expected the dialog component to be created with the injector from the viewContainerRef.'
-    );
+    expect(dialogInjector.get<DirectiveWithViewContainer>(DirectiveWithViewContainer))
+        .toBeTruthy('Expected the dialog component to be created with the ' +
+                    'injector from the viewContainerRef.');
   });
 
   it('should open a dialog with a component and no ViewContainerRef', () => {
@@ -174,7 +167,7 @@ describe('MatDialog', () => {
   });
 
   it('should apply the configured role to the dialog element', () => {
-    dialog.open(PizzaMsg, { role: 'alertdialog' });
+    dialog.open(PizzaMsg, {role : 'alertdialog'});
 
     viewContainerFixture.detectChanges();
 
@@ -183,7 +176,7 @@ describe('MatDialog', () => {
   });
 
   it('should apply the specified `aria-describedby`', () => {
-    dialog.open(PizzaMsg, { ariaDescribedBy: 'description-element' });
+    dialog.open(PizzaMsg, {ariaDescribedBy : 'description-element'});
 
     viewContainerFixture.detectChanges();
 
@@ -192,204 +185,194 @@ describe('MatDialog', () => {
   });
 
   it('should close a dialog and get back a result', fakeAsync(() => {
-    let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
-    let afterCloseCallback = jasmine.createSpy('afterClose callback');
+       let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       let afterCloseCallback = jasmine.createSpy('afterClose callback');
 
-    dialogRef.afterClosed().subscribe(afterCloseCallback);
-    dialogRef.close('Charmander');
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.afterClosed().subscribe(afterCloseCallback);
+       dialogRef.close('Charmander');
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(afterCloseCallback).toHaveBeenCalledWith('Charmander');
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
-  }));
+       expect(afterCloseCallback).toHaveBeenCalledWith('Charmander');
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
+     }));
 
   it('should dispose of dialog if view container is destroyed while animating', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-    viewContainerFixture.destroy();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+       viewContainerFixture.destroy();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
+     }));
 
   it('should dispatch the beforeClosed and afterClosed events when the ' +
-    'overlay is detached externally', fakeAsync(inject([Overlay], (overlay: Overlay) => {
-      const dialogRef = dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        scrollStrategy: overlay.scrollStrategies.close()
-      });
-      const beforeClosedCallback = jasmine.createSpy('beforeClosed callback');
-      const afterCloseCallback = jasmine.createSpy('afterClosed callback');
-
-      dialogRef.beforeClosed().subscribe(beforeClosedCallback);
-      dialogRef.afterClosed().subscribe(afterCloseCallback);
-
-      scrolledSubject.next();
-      viewContainerFixture.detectChanges();
-      flush();
-
-      expect(beforeClosedCallback).toHaveBeenCalledTimes(1);
-      expect(afterCloseCallback).toHaveBeenCalledTimes(1);
-    })));
+         'overlay is detached externally',
+     fakeAsync(inject([ Overlay ], (overlay: Overlay) => {
+       const dialogRef = dialog.open(PizzaMsg, {
+         viewContainerRef : testViewContainerRef,
+         scrollStrategy : overlay.scrollStrategies.close()
+       });
+       const beforeClosedCallback = jasmine.createSpy('beforeClosed callback');
+       const afterCloseCallback = jasmine.createSpy('afterClosed callback');
+
+       dialogRef.beforeClosed().subscribe(beforeClosedCallback);
+       dialogRef.afterClosed().subscribe(afterCloseCallback);
+
+       scrolledSubject.next();
+       viewContainerFixture.detectChanges();
+       flush();
+
+       expect(beforeClosedCallback).toHaveBeenCalledTimes(1);
+       expect(afterCloseCallback).toHaveBeenCalledTimes(1);
+     })));
 
   it('should close a dialog and get back a result before it is closed', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    flush();
-    viewContainerFixture.detectChanges();
+       flush();
+       viewContainerFixture.detectChanges();
 
-    // beforeClose should emit before dialog container is destroyed
-    const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
-      expect(overlayContainerElement.querySelector('mat-dialog-container'))
-          .not.toBeNull('dialog container exists when beforeClose is called');
-    });
+       // beforeClose should emit before dialog container is destroyed
+       const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
+         expect(overlayContainerElement.querySelector('mat-dialog-container'))
+             .not.toBeNull('dialog container exists when beforeClose is called');
+       });
 
-    dialogRef.beforeClosed().subscribe(beforeCloseHandler);
-    dialogRef.close('Bulbasaur');
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.beforeClosed().subscribe(beforeCloseHandler);
+       dialogRef.close('Bulbasaur');
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaur');
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
-  }));
+       expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaur');
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
+     }));
 
   it('should close a dialog via the escape key', fakeAsync(() => {
-    dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
-    viewContainerFixture.detectChanges();
-    flush();
+       const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
-    expect(event.defaultPrevented).toBe(true);
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
+       expect(event.defaultPrevented).toBe(true);
+     }));
 
   it('should not close a dialog via the escape key with a modifier', fakeAsync(() => {
-    dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt: true});
-    dispatchEvent(document.body, event);
-    viewContainerFixture.detectChanges();
-    flush();
+       const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt : true});
+       dispatchEvent(document.body, event);
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
-    expect(event.defaultPrevented).toBe(false);
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
+       expect(event.defaultPrevented).toBe(false);
+     }));
 
   it('should close from a ViewContainerRef with OnPush change detection', fakeAsync(() => {
-    const onPushFixture = TestBed.createComponent(ComponentWithOnPushViewContainer);
+       const onPushFixture = TestBed.createComponent(ComponentWithOnPushViewContainer);
 
-    onPushFixture.detectChanges();
+       onPushFixture.detectChanges();
 
-    const dialogRef = dialog.open(PizzaMsg, {
-      viewContainerRef: onPushFixture.componentInstance.viewContainerRef
-    });
+       const dialogRef = dialog.open(
+           PizzaMsg, {viewContainerRef : onPushFixture.componentInstance.viewContainerRef});
 
-    flushMicrotasks();
-    onPushFixture.detectChanges();
-    flushMicrotasks();
+       flushMicrotasks();
+       onPushFixture.detectChanges();
+       flushMicrotasks();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-        .toBe(1, 'Expected one open dialog.');
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
+           .toBe(1, 'Expected one open dialog.');
 
-    dialogRef.close();
-    flushMicrotasks();
-    onPushFixture.detectChanges();
-    tick(500);
+       dialogRef.close();
+       flushMicrotasks();
+       onPushFixture.detectChanges();
+       tick(500);
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-        .toBe(0, 'Expected no open dialogs.');
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
+           .toBe(0, 'Expected no open dialogs.');
+     }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
-    dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
 
-    backdrop.click();
-    viewContainerFixture.detectChanges();
-    flush();
+       backdrop.click();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
+     }));
 
   it('should emit the backdropClick stream when clicking on the overlay backdrop', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {
-      viewContainerRef: testViewContainerRef
-    });
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    const spy = jasmine.createSpy('backdropClick spy');
-    dialogRef.backdropClick().subscribe(spy);
+       const spy = jasmine.createSpy('backdropClick spy');
+       dialogRef.backdropClick().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
 
-    backdrop.click();
-    expect(spy).toHaveBeenCalledTimes(1);
+       backdrop.click();
+       expect(spy).toHaveBeenCalledTimes(1);
 
-    viewContainerFixture.detectChanges();
-    flush();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    // Additional clicks after the dialog has closed should not be emitted
-    backdrop.click();
-    expect(spy).toHaveBeenCalledTimes(1);
-  }));
+       // Additional clicks after the dialog has closed should not be emitted
+       backdrop.click();
+       expect(spy).toHaveBeenCalledTimes(1);
+     }));
 
   it('should emit the keyboardEvent stream when key events target the overlay', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-    const spy = jasmine.createSpy('keyboardEvent spy');
-    dialogRef.keydownEvents().subscribe(spy);
+       const spy = jasmine.createSpy('keyboardEvent spy');
+       dialogRef.keydownEvents().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-    let container = overlayContainerElement.querySelector('mat-dialog-container') as HTMLElement;
-    dispatchKeyboardEvent(document.body, 'keydown', A);
-    dispatchKeyboardEvent(backdrop, 'keydown', A);
-    dispatchKeyboardEvent(container, 'keydown', A);
+       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+       let container = overlayContainerElement.querySelector('mat-dialog-container') as HTMLElement;
+       dispatchKeyboardEvent(document.body, 'keydown', A);
+       dispatchKeyboardEvent(backdrop, 'keydown', A);
+       dispatchKeyboardEvent(container, 'keydown', A);
 
-    expect(spy).toHaveBeenCalledTimes(3);
-  }));
+       expect(spy).toHaveBeenCalledTimes(3);
+     }));
 
   it('should notify the observers if a dialog has been opened', () => {
     dialog.afterOpened.subscribe(ref => {
-      expect(dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef
-      })).toBe(ref);
+      expect(dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef})).toBe(ref);
     });
   });
 
   it('should notify the observers if all open dialogs have finished closing', fakeAsync(() => {
-    const ref1 = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
-    const ref2 = dialog.open(ContentElementDialog, { viewContainerRef: testViewContainerRef });
-    const spy = jasmine.createSpy('afterAllClosed spy');
+       const ref1 = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       const ref2 = dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
+       const spy = jasmine.createSpy('afterAllClosed spy');
 
-    dialog.afterAllClosed.subscribe(spy);
+       dialog.afterAllClosed.subscribe(spy);
 
-    ref1.close();
-    viewContainerFixture.detectChanges();
-    flush();
+       ref1.close();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(spy).not.toHaveBeenCalled();
+       expect(spy).not.toHaveBeenCalled();
 
-    ref2.close();
-    viewContainerFixture.detectChanges();
-    flush();
-    expect(spy).toHaveBeenCalled();
-  }));
+       ref2.close();
+       viewContainerFixture.detectChanges();
+       flush();
+       expect(spy).toHaveBeenCalled();
+     }));
 
   it('should emit the afterAllClosed stream on subscribe if there are no open dialogs', () => {
     const spy = jasmine.createSpy('afterAllClosed spy');
@@ -400,9 +383,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the width of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      width: '500px'
-    });
+    dialog.open(PizzaMsg, {width : '500px'});
 
     viewContainerFixture.detectChanges();
 
@@ -412,9 +393,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      height: '100px'
-    });
+    dialog.open(PizzaMsg, {height : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -424,9 +403,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the min-width of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      minWidth: '500px'
-    });
+    dialog.open(PizzaMsg, {minWidth : '500px'});
 
     viewContainerFixture.detectChanges();
 
@@ -436,36 +413,32 @@ describe('MatDialog', () => {
   });
 
   it('should override the max-width of the overlay pane', fakeAsync(() => {
-    let dialogRef = dialog.open(PizzaMsg);
+       let dialogRef = dialog.open(PizzaMsg);
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+       let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth).toBe('80vw',
-      'Expected dialog to set a default max-width on overlay pane');
+       expect(overlayPane.style.maxWidth)
+           .toBe('80vw', 'Expected dialog to set a default max-width on overlay pane');
 
-    dialogRef.close();
+       dialogRef.close();
 
-    tick(500);
-    viewContainerFixture.detectChanges();
-    flushMicrotasks();
+       tick(500);
+       viewContainerFixture.detectChanges();
+       flushMicrotasks();
 
-    dialogRef = dialog.open(PizzaMsg, {
-      maxWidth: '100px'
-    });
+       dialogRef = dialog.open(PizzaMsg, {maxWidth : '100px'});
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+       overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth).toBe('100px');
-  }));
+       expect(overlayPane.style.maxWidth).toBe('100px');
+     }));
 
   it('should override the min-height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      minHeight: '300px'
-    });
+    dialog.open(PizzaMsg, {minHeight : '300px'});
 
     viewContainerFixture.detectChanges();
 
@@ -475,9 +448,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the max-height of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      maxHeight: '100px'
-    });
+    dialog.open(PizzaMsg, {maxHeight : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -487,11 +458,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the top offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      position: {
-        top: '100px'
-      }
-    });
+    dialog.open(PizzaMsg, {position : {top : '100px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -501,11 +468,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the bottom offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      position: {
-        bottom: '200px'
-      }
-    });
+    dialog.open(PizzaMsg, {position : {bottom : '200px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -515,11 +478,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the left offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      position: {
-        left: '250px'
-      }
-    });
+    dialog.open(PizzaMsg, {position : {left : '250px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -529,11 +488,7 @@ describe('MatDialog', () => {
   });
 
   it('should override the right offset of the overlay pane', () => {
-    dialog.open(PizzaMsg, {
-      position: {
-        right: '125px'
-      }
-    });
+    dialog.open(PizzaMsg, {position : {right : '125px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -543,11 +498,7 @@ describe('MatDialog', () => {
   });
 
   it('should allow for the position to be updated', () => {
-    let dialogRef = dialog.open(PizzaMsg, {
-      position: {
-        left: '250px'
-      }
-    });
+    let dialogRef = dialog.open(PizzaMsg, {position : {left : '250px'}});
 
     viewContainerFixture.detectChanges();
 
@@ -555,13 +506,13 @@ describe('MatDialog', () => {
 
     expect(overlayPane.style.marginLeft).toBe('250px');
 
-    dialogRef.updatePosition({ left: '500px' });
+    dialogRef.updatePosition({left : '500px'});
 
     expect(overlayPane.style.marginLeft).toBe('500px');
   });
 
   it('should allow for the dimensions to be updated', () => {
-    let dialogRef = dialog.open(PizzaMsg, { width: '100px' });
+    let dialogRef = dialog.open(PizzaMsg, {width : '100px'});
 
     viewContainerFixture.detectChanges();
 
@@ -596,7 +547,7 @@ describe('MatDialog', () => {
   });
 
   it('should allow setting the layout direction', () => {
-    dialog.open(PizzaMsg, { direction: 'rtl' });
+    dialog.open(PizzaMsg, {direction : 'rtl'});
 
     viewContainerFixture.detectChanges();
 
@@ -606,7 +557,7 @@ describe('MatDialog', () => {
   });
 
   it('should inject the correct layout direction in the component instance', () => {
-    const dialogRef = dialog.open(PizzaMsg, { direction: 'rtl' });
+    const dialogRef = dialog.open(PizzaMsg, {direction : 'rtl'});
 
     viewContainerFixture.detectChanges();
 
@@ -622,39 +573,39 @@ describe('MatDialog', () => {
   });
 
   it('should use the passed in ViewContainerRef from the config', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    // One view ref is for the container and one more for the component with the content.
-    expect(testViewContainerRef.length).toBe(2);
+       // One view ref is for the container and one more for the component with the content.
+       expect(testViewContainerRef.length).toBe(2);
 
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(testViewContainerRef.length).toBe(0);
-  }));
+       expect(testViewContainerRef.length).toBe(0);
+     }));
 
   it('should close all of the dialogs', fakeAsync(() => {
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3);
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3);
 
-    dialog.closeAll();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialog.closeAll();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
+     }));
 
   it('should set the proper animation states', () => {
-    let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+    let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
     let dialogContainer: MatDialogContainer =
-        viewContainerFixture.debugElement.query(By.directive(MatDialogContainer))!
-        .componentInstance;
+        viewContainerFixture.debugElement.query(
+                                             By.directive(MatDialogContainer))!.componentInstance;
 
     expect(dialogContainer._state).toBe('enter');
 
@@ -664,130 +615,123 @@ describe('MatDialog', () => {
   });
 
   it('should close all dialogs when the user goes forwards/backwards in history', fakeAsync(() => {
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
 
-    mockLocation.simulateUrlPop('');
-    viewContainerFixture.detectChanges();
-    flush();
+       mockLocation.simulateUrlPop('');
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
+     }));
 
   it('should close all open dialogs when the location hash changes', fakeAsync(() => {
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
 
-    mockLocation.simulateHashChange('');
-    viewContainerFixture.detectChanges();
-    flush();
+       mockLocation.simulateHashChange('');
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
+     }));
 
   it('should close all of the dialogs when the injectable is destroyed', fakeAsync(() => {
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg);
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3);
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3);
 
-    dialog.ngOnDestroy();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialog.ngOnDestroy();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
+     }));
 
   it('should complete open and close streams when the injectable is destroyed', fakeAsync(() => {
-    const afterOpenedSpy = jasmine.createSpy('after opened spy');
-    const afterAllClosedSpy = jasmine.createSpy('after all closed spy');
-    const afterOpenedSubscription = dialog.afterOpened.subscribe({complete: afterOpenedSpy});
-    const afterAllClosedSubscription = dialog.afterAllClosed.subscribe({
-      complete: afterAllClosedSpy
-    });
+       const afterOpenedSpy = jasmine.createSpy('after opened spy');
+       const afterAllClosedSpy = jasmine.createSpy('after all closed spy');
+       const afterOpenedSubscription = dialog.afterOpened.subscribe({complete : afterOpenedSpy});
+       const afterAllClosedSubscription =
+           dialog.afterAllClosed.subscribe({complete : afterAllClosedSpy});
 
-    dialog.ngOnDestroy();
+       dialog.ngOnDestroy();
 
-    expect(afterOpenedSpy).toHaveBeenCalled();
-    expect(afterAllClosedSpy).toHaveBeenCalled();
+       expect(afterOpenedSpy).toHaveBeenCalled();
+       expect(afterAllClosedSpy).toHaveBeenCalled();
 
-    afterOpenedSubscription.unsubscribe();
-    afterAllClosedSubscription.unsubscribe();
-  }));
+       afterOpenedSubscription.unsubscribe();
+       afterAllClosedSubscription.unsubscribe();
+     }));
 
   it('should allow the consumer to disable closing a dialog on navigation', fakeAsync(() => {
-    dialog.open(PizzaMsg);
-    dialog.open(PizzaMsg, {closeOnNavigation: false});
+       dialog.open(PizzaMsg);
+       dialog.open(PizzaMsg, {closeOnNavigation : false});
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2);
 
-    mockLocation.simulateUrlPop('');
-    viewContainerFixture.detectChanges();
-    flush();
+       mockLocation.simulateUrlPop('');
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(1);
-  }));
+       expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(1);
+     }));
 
   it('should have the componentInstance available in the afterClosed callback', fakeAsync(() => {
-    let dialogRef = dialog.open(PizzaMsg);
-    let spy = jasmine.createSpy('afterClosed spy');
+       let dialogRef = dialog.open(PizzaMsg);
+       let spy = jasmine.createSpy('afterClosed spy');
 
-    flushMicrotasks();
-    viewContainerFixture.detectChanges();
-    flushMicrotasks();
+       flushMicrotasks();
+       viewContainerFixture.detectChanges();
+       flushMicrotasks();
 
-    dialogRef.afterClosed().subscribe(() => {
-      spy();
-      expect(dialogRef.componentInstance).toBeTruthy('Expected component instance to be defined.');
-    });
+       dialogRef.afterClosed().subscribe(() => {
+         spy();
+         expect(dialogRef.componentInstance)
+             .toBeTruthy('Expected component instance to be defined.');
+       });
 
-    dialogRef.close();
+       dialogRef.close();
 
-    flushMicrotasks();
-    viewContainerFixture.detectChanges();
-    tick(500);
+       flushMicrotasks();
+       viewContainerFixture.detectChanges();
+       tick(500);
 
-    // Ensure that the callback actually fires.
-    expect(spy).toHaveBeenCalled();
-  }));
+       // Ensure that the callback actually fires.
+       expect(spy).toHaveBeenCalled();
+     }));
 
   it('should be able to attach a custom scroll strategy', fakeAsync(() => {
-    const scrollStrategy: ScrollStrategy = {
-      attach: () => {},
-      enable: jasmine.createSpy('scroll strategy enable spy'),
-      disable: () => {}
-    };
+       const scrollStrategy: ScrollStrategy = {
+         attach : () => {},
+         enable : jasmine.createSpy('scroll strategy enable spy'),
+         disable : () => {}
+       };
 
-    dialog.open(PizzaMsg, {scrollStrategy});
-    expect(scrollStrategy.enable).toHaveBeenCalled();
-  }));
+       dialog.open(PizzaMsg, {scrollStrategy});
+       expect(scrollStrategy.enable).toHaveBeenCalled();
+     }));
 
   it('should be able to pass in an alternate ComponentFactoryResolver',
-    inject([ComponentFactoryResolver], (resolver: ComponentFactoryResolver) => {
-      spyOn(resolver, 'resolveComponentFactory').and.callThrough();
+     inject([ ComponentFactoryResolver ], (resolver: ComponentFactoryResolver) => {
+       spyOn(resolver, 'resolveComponentFactory').and.callThrough();
 
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        componentFactoryResolver: resolver
-      });
-      viewContainerFixture.detectChanges();
+       dialog.open(PizzaMsg,
+                   {viewContainerRef : testViewContainerRef, componentFactoryResolver : resolver});
+       viewContainerFixture.detectChanges();
 
-      expect(resolver.resolveComponentFactory).toHaveBeenCalled();
-    }));
+       expect(resolver.resolveComponentFactory).toHaveBeenCalled();
+     }));
 
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
-      let config = {
-        data: {
-          stringParam: 'hello',
-          dateParam: new Date()
-        }
-      };
+      let config = {data : {stringParam : 'hello', dateParam : new Date()}};
 
       let instance = dialog.open(DialogWithInjectedData, config).componentInstance;
 
@@ -804,16 +748,16 @@ describe('MatDialog', () => {
   });
 
   it('should not keep a reference to the component after the dialog is closed', fakeAsync(() => {
-    let dialogRef = dialog.open(PizzaMsg);
+       let dialogRef = dialog.open(PizzaMsg);
 
-    expect(dialogRef.componentInstance).toBeTruthy();
+       expect(dialogRef.componentInstance).toBeTruthy();
 
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
-  }));
+       expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
+     }));
 
   it('should assign a unique id to each dialog', () => {
     const one = dialog.open(PizzaMsg);
@@ -825,85 +769,84 @@ describe('MatDialog', () => {
   });
 
   it('should allow for the id to be overwritten', () => {
-    const dialogRef = dialog.open(PizzaMsg, { id: 'pizza' });
+    const dialogRef = dialog.open(PizzaMsg, {id : 'pizza'});
     expect(dialogRef.id).toBe('pizza');
   });
 
   it('should throw when trying to open a dialog with the same id as another dialog', () => {
-    dialog.open(PizzaMsg, { id: 'pizza' });
-    expect(() => dialog.open(PizzaMsg, { id: 'pizza' })).toThrowError(/must be unique/g);
+    dialog.open(PizzaMsg, {id : 'pizza'});
+    expect(() => dialog.open(PizzaMsg, {id : 'pizza'})).toThrowError(/must be unique/g);
   });
 
   it('should be able to find a dialog by id', () => {
-    const dialogRef = dialog.open(PizzaMsg, { id: 'pizza' });
+    const dialogRef = dialog.open(PizzaMsg, {id : 'pizza'});
     expect(dialog.getDialogById('pizza')).toBe(dialogRef);
   });
 
   it('should toggle `aria-hidden` on the overlay container siblings', fakeAsync(() => {
-    const sibling = document.createElement('div');
-    overlayContainerElement.parentNode!.appendChild(sibling);
+       const sibling = document.createElement('div');
+       overlayContainerElement.parentNode!.appendChild(sibling);
 
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden');
-    expect(overlayContainerElement.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected overlay container not to be hidden.');
+       expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden');
+       expect(overlayContainerElement.hasAttribute('aria-hidden'))
+           .toBe(false, 'Expected overlay container not to be hidden.');
 
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(sibling.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected sibling to no longer be hidden.');
-    sibling.parentNode!.removeChild(sibling);
-  }));
+       expect(sibling.hasAttribute('aria-hidden'))
+           .toBe(false, 'Expected sibling to no longer be hidden.');
+       sibling.parentNode!.removeChild(sibling);
+     }));
 
   it('should restore `aria-hidden` to the overlay container siblings on close', fakeAsync(() => {
-    const sibling = document.createElement('div');
+       const sibling = document.createElement('div');
 
-    sibling.setAttribute('aria-hidden', 'true');
-    overlayContainerElement.parentNode!.appendChild(sibling);
+       sibling.setAttribute('aria-hidden', 'true');
+       overlayContainerElement.parentNode!.appendChild(sibling);
 
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden.');
+       expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden.');
 
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to remain hidden.');
-    sibling.parentNode!.removeChild(sibling);
-  }));
+       expect(sibling.getAttribute('aria-hidden'))
+           .toBe('true', 'Expected sibling to remain hidden.');
+       sibling.parentNode!.removeChild(sibling);
+     }));
 
   it('should not set `aria-hidden` on `aria-live` elements', fakeAsync(() => {
-    const sibling = document.createElement('div');
+       const sibling = document.createElement('div');
 
-    sibling.setAttribute('aria-live', 'polite');
-    overlayContainerElement.parentNode!.appendChild(sibling);
+       sibling.setAttribute('aria-live', 'polite');
+       overlayContainerElement.parentNode!.appendChild(sibling);
 
-    dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(sibling.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected live element not to be hidden.');
-    sibling.parentNode!.removeChild(sibling);
-  }));
+       expect(sibling.hasAttribute('aria-hidden'))
+           .toBe(false, 'Expected live element not to be hidden.');
+       sibling.parentNode!.removeChild(sibling);
+     }));
 
   it('should add and remove classes while open', () => {
-    let dialogRef = dialog.open(PizzaMsg, {
-      disableClose: true,
-      viewContainerRef: testViewContainerRef
-    });
+    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');
+        .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');
@@ -914,113 +857,100 @@ describe('MatDialog', () => {
 
   describe('disableClose option', () => {
     it('should prevent closing via clicks on the backdrop', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        disableClose: true,
-        viewContainerRef: testViewContainerRef
-      });
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
-      viewContainerFixture.detectChanges();
+         viewContainerFixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-      backdrop.click();
-      viewContainerFixture.detectChanges();
-      flush();
+         let backdrop =
+             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+         backdrop.click();
+         viewContainerFixture.detectChanges();
+         flush();
 
-      expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
-    }));
+         expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
+       }));
 
     it('should prevent closing via the escape key', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        disableClose: true,
-        viewContainerRef: testViewContainerRef
-      });
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
-      viewContainerFixture.detectChanges();
-      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
-      viewContainerFixture.detectChanges();
-      flush();
+         viewContainerFixture.detectChanges();
+         dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+         viewContainerFixture.detectChanges();
+         flush();
 
-      expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
-    }));
+         expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
+       }));
 
     it('should allow for the disableClose option to be updated while open', fakeAsync(() => {
-      let dialogRef = dialog.open(PizzaMsg, {
-        disableClose: true,
-        viewContainerRef: testViewContainerRef
-      });
+         let dialogRef =
+             dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
-      viewContainerFixture.detectChanges();
+         viewContainerFixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-      backdrop.click();
+         let backdrop =
+             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+         backdrop.click();
 
-      expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
+         expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
 
-      dialogRef.disableClose = false;
-      backdrop.click();
-      viewContainerFixture.detectChanges();
-      flush();
+         dialogRef.disableClose = false;
+         backdrop.click();
+         viewContainerFixture.detectChanges();
+         flush();
 
-      expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
-    }));
+         expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
+       }));
 
     it('should recapture focus when clicking on the backdrop', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        disableClose: true,
-        viewContainerRef: testViewContainerRef
-      });
+         dialog.open(PizzaMsg, {disableClose : true, viewContainerRef : testViewContainerRef});
 
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-      let input = overlayContainerElement.querySelector('input') as HTMLInputElement;
+         let backdrop =
+             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+         let input = overlayContainerElement.querySelector('input') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
+         expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
 
-      input.blur(); // Programmatic clicks might not move focus so we simulate it.
-      backdrop.click();
-      viewContainerFixture.detectChanges();
-      flush();
+         input.blur(); // Programmatic clicks might not move focus so we simulate it.
+         backdrop.click();
+         viewContainerFixture.detectChanges();
+         flush();
 
-      expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
-    }));
+         expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
+       }));
 
     it('should recapture focus to the container when clicking on the backdrop with ' +
-      'autoFocus disabled', fakeAsync(() => {
-        dialog.open(PizzaMsg, {
-          disableClose: true,
-          viewContainerRef: testViewContainerRef,
-          autoFocus: false
-        });
-
-        viewContainerFixture.detectChanges();
-        flushMicrotasks();
-
-        let backdrop =
-          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        let container =
-          overlayContainerElement.querySelector('.mat-dialog-container') as HTMLInputElement;
-
-        expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
-
-        container.blur(); // Programmatic clicks might not move focus so we simulate it.
-        backdrop.click();
-        viewContainerFixture.detectChanges();
-        flush();
-
-        expect(document.activeElement)
-            .toBe(container, 'Expected container to stay focused after click');
-      }));
-
+           'autoFocus disabled',
+       fakeAsync(() => {
+         dialog.open(
+             PizzaMsg,
+             {disableClose : true, viewContainerRef : testViewContainerRef, autoFocus : false});
+
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
+
+         let backdrop =
+             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+         let container =
+             overlayContainerElement.querySelector('.mat-dialog-container') as HTMLInputElement;
+
+         expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+
+         container.blur(); // Programmatic clicks might not move focus so we simulate it.
+         backdrop.click();
+         viewContainerFixture.detectChanges();
+         flush();
+
+         expect(document.activeElement)
+             .toBe(container, 'Expected container to stay focused after click');
+       }));
   });
 
   describe('hasBackdrop option', () => {
     it('should have a backdrop', () => {
-      dialog.open(PizzaMsg, {
-        hasBackdrop: true,
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg, {hasBackdrop : true, viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -1028,10 +958,7 @@ describe('MatDialog', () => {
     });
 
     it('should not have a backdrop', () => {
-      dialog.open(PizzaMsg, {
-        hasBackdrop: false,
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg, {hasBackdrop : false, viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -1041,10 +968,8 @@ describe('MatDialog', () => {
 
   describe('panelClass option', () => {
     it('should have custom panel class', () => {
-      dialog.open(PizzaMsg, {
-        panelClass: 'custom-panel-class',
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg,
+                  {panelClass : 'custom-panel-class', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -1054,10 +979,7 @@ describe('MatDialog', () => {
 
   describe('backdropClass option', () => {
     it('should have default backdrop class', () => {
-      dialog.open(PizzaMsg, {
-        backdropClass: '',
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg, {backdropClass : '', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -1065,10 +987,9 @@ describe('MatDialog', () => {
     });
 
     it('should have custom backdrop class', () => {
-      dialog.open(PizzaMsg, {
-        backdropClass: 'custom-backdrop-class',
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(
+          PizzaMsg,
+          {backdropClass : 'custom-backdrop-class', viewContainerRef : testViewContainerRef});
 
       viewContainerFixture.detectChanges();
 
@@ -1082,327 +1003,322 @@ describe('MatDialog', () => {
     afterEach(() => document.body.removeChild(overlayContainerElement));
 
     it('should focus the first tabbable element of the dialog on open', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef
-      });
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
-    }));
+         expect(document.activeElement!.tagName)
+             .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+       }));
 
     it('should allow disabling focus of the first tabbable element', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        autoFocus: false
-      });
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, autoFocus : false});
 
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      expect(document.activeElement!.tagName).not.toBe('INPUT');
-    }));
+         expect(document.activeElement!.tagName).not.toBe('INPUT');
+       }));
 
     it('should attach the focus trap even if automatic focus is disabled', fakeAsync(() => {
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        autoFocus: false
-      });
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, autoFocus : false});
 
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      expect(overlayContainerElement.querySelectorAll('.cdk-focus-trap-anchor').length)
-          .toBeGreaterThan(0);
-    }));
+         expect(overlayContainerElement.querySelectorAll('.cdk-focus-trap-anchor').length)
+             .toBeGreaterThan(0);
+       }));
 
     it('should re-focus trigger element when dialog closes', fakeAsync(() => {
-      // Create a element that has focus before the dialog is opened.
-      let button = document.createElement('button');
-      button.id = 'dialog-trigger';
-      document.body.appendChild(button);
-      button.focus();
+         // Create a element that has focus before the dialog is opened.
+         let button = document.createElement('button');
+         button.id = 'dialog-trigger';
+         document.body.appendChild(button);
+         button.focus();
 
-      let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      expect(document.activeElement!.id)
-          .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
+         expect(document.activeElement!.id)
+             .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
-      dialogRef.close();
-      expect(document.activeElement!.id).not.toBe('dialog-trigger',
-          'Expcted the focus not to have changed before the animation finishes.');
+         dialogRef.close();
+         expect(document.activeElement!.id)
+             .not.toBe('dialog-trigger',
+                       'Expcted the focus not to have changed before the animation finishes.');
 
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      tick(500);
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      expect(document.activeElement!.id).toBe('dialog-trigger',
-          'Expected that the trigger was refocused after the dialog is closed.');
+         expect(document.activeElement!.id)
+             .toBe('dialog-trigger',
+                   'Expected that the trigger was refocused after the dialog is closed.');
 
-      document.body.removeChild(button);
-    }));
+         document.body.removeChild(button);
+       }));
 
     it('should re-focus the trigger via keyboard when closed via escape key', fakeAsync(() => {
-      const button = document.createElement('button');
-      let lastFocusOrigin: FocusOrigin = null;
+         const button = document.createElement('button');
+         let lastFocusOrigin: FocusOrigin = null;
 
-      focusMonitor.monitor(button, false)
-        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+         focusMonitor.monitor(button, false)
+             .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
 
-      document.body.appendChild(button);
-      button.focus();
+         document.body.appendChild(button);
+         button.focus();
 
-      // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
-      patchElementFocus(button);
+         // Patch the element focus after the initial and real focus, because otherwise the
+         // `activeElement` won't be set, and the dialog won't be able to restore focus to an
+         // element.
+         patchElementFocus(button);
 
-      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-      tick(500);
-      viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         tick(500);
+         viewContainerFixture.detectChanges();
+         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
-      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+         dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
 
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      tick(500);
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      expect(lastFocusOrigin!)
-        .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+         expect(lastFocusOrigin!)
+             .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
 
-      focusMonitor.stopMonitoring(button);
-      document.body.removeChild(button);
-    }));
+         focusMonitor.stopMonitoring(button);
+         document.body.removeChild(button);
+       }));
 
     it('should re-focus the trigger via mouse when backdrop has been clicked', fakeAsync(() => {
-      const button = document.createElement('button');
-      let lastFocusOrigin: FocusOrigin = null;
+         const button = document.createElement('button');
+         let lastFocusOrigin: FocusOrigin = null;
 
-      focusMonitor.monitor(button, false)
-        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+         focusMonitor.monitor(button, false)
+             .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
 
-      document.body.appendChild(button);
-      button.focus();
+         document.body.appendChild(button);
+         button.focus();
 
-      // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
-      patchElementFocus(button);
+         // Patch the element focus after the initial and real focus, because otherwise the
+         // `activeElement` won't be set, and the dialog won't be able to restore focus to an
+         // element.
+         patchElementFocus(button);
 
-      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+         dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-      tick(500);
-      viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         tick(500);
+         viewContainerFixture.detectChanges();
+         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
-      const backdrop = overlayContainerElement
-          .querySelector('.cdk-overlay-backdrop') as HTMLElement;
+         const backdrop =
+             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
 
-      backdrop.click();
-      viewContainerFixture.detectChanges();
-      tick(500);
+         backdrop.click();
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      expect(lastFocusOrigin!)
-        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+         expect(lastFocusOrigin!)
+             .toBe('mouse', 'Expected the trigger button to be focused via mouse');
 
-      focusMonitor.stopMonitoring(button);
-      document.body.removeChild(button);
-    }));
+         focusMonitor.stopMonitoring(button);
+         document.body.removeChild(button);
+       }));
 
     it('should re-focus via keyboard if the close button has been triggered through keyboard',
-        fakeAsync(() => {
+       fakeAsync(() => {
+         const button = document.createElement('button');
+         let lastFocusOrigin: FocusOrigin = null;
 
-      const button = document.createElement('button');
-      let lastFocusOrigin: FocusOrigin = null;
+         focusMonitor.monitor(button, false)
+             .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
 
-      focusMonitor.monitor(button, false)
-        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+         document.body.appendChild(button);
+         button.focus();
 
-      document.body.appendChild(button);
-      button.focus();
+         // Patch the element focus after the initial and real focus, because otherwise the
+         // `activeElement` won't be set, and the dialog won't be able to restore focus to an
+         // element.
+         patchElementFocus(button);
 
-      // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
-      patchElementFocus(button);
+         dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
 
-      dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+         tick(500);
+         viewContainerFixture.detectChanges();
+         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
-      tick(500);
-      viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
-
-      const closeButton = overlayContainerElement
-        .querySelector('button[mat-dialog-close]') as HTMLElement;
+         const closeButton =
+             overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement;
 
-      // Fake the behavior of pressing the SPACE key on a button element. Browsers fire a `click`
-      // event with a MouseEvent, which has coordinates that are out of the element boundaries.
-      dispatchMouseEvent(closeButton, 'click', 0, 0);
+         // Fake the behavior of pressing the SPACE key on a button element. Browsers fire a `click`
+         // event with a MouseEvent, which has coordinates that are out of the element boundaries.
+         dispatchMouseEvent(closeButton, 'click', 0, 0);
 
-      viewContainerFixture.detectChanges();
-      tick(500);
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      expect(lastFocusOrigin!)
-        .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+         expect(lastFocusOrigin!)
+             .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
 
-      focusMonitor.stopMonitoring(button);
-      document.body.removeChild(button);
-    }));
+         focusMonitor.stopMonitoring(button);
+         document.body.removeChild(button);
+       }));
 
     it('should re-focus via mouse if the close button has been clicked', fakeAsync(() => {
-      const button = document.createElement('button');
-      let lastFocusOrigin: FocusOrigin = null;
+         const button = document.createElement('button');
+         let lastFocusOrigin: FocusOrigin = null;
 
-      focusMonitor.monitor(button, false)
-        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+         focusMonitor.monitor(button, false)
+             .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
 
-      document.body.appendChild(button);
-      button.focus();
+         document.body.appendChild(button);
+         button.focus();
 
-      // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
-      patchElementFocus(button);
+         // Patch the element focus after the initial and real focus, because otherwise the
+         // `activeElement` won't be set, and the dialog won't be able to restore focus to an
+         // element.
+         patchElementFocus(button);
 
-      dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+         dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
 
-      tick(500);
-      viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         tick(500);
+         viewContainerFixture.detectChanges();
+         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
-      const closeButton = overlayContainerElement
-        .querySelector('button[mat-dialog-close]') as HTMLElement;
+         const closeButton =
+             overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement;
 
-      // The dialog close button detects the focus origin by inspecting the click event. If
-      // coordinates of the click are not present, it assumes that the click has been triggered
-      // by keyboard.
-      dispatchMouseEvent(closeButton, 'click', 10, 10);
+         // The dialog close button detects the focus origin by inspecting the click event. If
+         // coordinates of the click are not present, it assumes that the click has been triggered
+         // by keyboard.
+         dispatchMouseEvent(closeButton, 'click', 10, 10);
 
-      viewContainerFixture.detectChanges();
-      tick(500);
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      expect(lastFocusOrigin!)
-        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+         expect(lastFocusOrigin!)
+             .toBe('mouse', 'Expected the trigger button to be focused via mouse');
 
-      focusMonitor.stopMonitoring(button);
-      document.body.removeChild(button);
-    }));
+         focusMonitor.stopMonitoring(button);
+         document.body.removeChild(button);
+       }));
 
     it('should allow the consumer to shift focus in afterClosed', fakeAsync(() => {
-      // Create a element that has focus before the dialog is opened.
-      let button = document.createElement('button');
-      let input = document.createElement('input');
+         // Create a element that has focus before the dialog is opened.
+         let button = document.createElement('button');
+         let input = document.createElement('input');
 
-      button.id = 'dialog-trigger';
-      input.id = 'input-to-be-focused';
+         button.id = 'dialog-trigger';
+         input.id = 'input-to-be-focused';
 
-      document.body.appendChild(button);
-      document.body.appendChild(input);
-      button.focus();
+         document.body.appendChild(button);
+         document.body.appendChild(input);
+         button.focus();
 
-      let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+         let dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
-      tick(500);
-      viewContainerFixture.detectChanges();
+         tick(500);
+         viewContainerFixture.detectChanges();
 
-      dialogRef.afterClosed().subscribe(() => input.focus());
-      dialogRef.close();
+         dialogRef.afterClosed().subscribe(() => input.focus());
+         dialogRef.close();
 
-      tick(500);
-      viewContainerFixture.detectChanges();
-      flush();
+         tick(500);
+         viewContainerFixture.detectChanges();
+         flush();
 
-      expect(document.activeElement!.id).toBe('input-to-be-focused',
-          'Expected that the trigger was refocused after the dialog is closed.');
+         expect(document.activeElement!.id)
+             .toBe('input-to-be-focused',
+                   'Expected that the trigger was refocused after the dialog is closed.');
 
-      document.body.removeChild(button);
-      document.body.removeChild(input);
-      flush();
-    }));
+         document.body.removeChild(button);
+         document.body.removeChild(input);
+         flush();
+       }));
 
     it('should move focus to the container if there are no focusable elements in the dialog',
-      fakeAsync(() => {
-        dialog.open(DialogWithoutFocusableElements);
+       fakeAsync(() => {
+         dialog.open(DialogWithoutFocusableElements);
 
-        viewContainerFixture.detectChanges();
-        flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-        expect(document.activeElement!.tagName)
-            .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
-      }));
+         expect(document.activeElement!.tagName)
+             .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
+       }));
 
     it('should be able to disable focus restoration', fakeAsync(() => {
-      // Create a element that has focus before the dialog is opened.
-      const button = document.createElement('button');
-      button.id = 'dialog-trigger';
-      document.body.appendChild(button);
-      button.focus();
-
-      const dialogRef = dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        restoreFocus: false
-      });
-
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
-
-      expect(document.activeElement!.id)
-          .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
-
-      dialogRef.close();
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      tick(500);
-
-      expect(document.activeElement!.id).not.toBe('dialog-trigger',
-          'Expected focus not to have been restored.');
-
-      document.body.removeChild(button);
-    }));
+         // Create a element that has focus before the dialog is opened.
+         const button = document.createElement('button');
+         button.id = 'dialog-trigger';
+         document.body.appendChild(button);
+         button.focus();
 
-    it('should not move focus if it was moved outside the dialog while animating', fakeAsync(() => {
-      // Create a element that has focus before the dialog is opened.
-      const button = document.createElement('button');
-      const otherButton = document.createElement('button');
-      const body = document.body;
-      button.id = 'dialog-trigger';
-      otherButton.id = 'other-button';
-      body.appendChild(button);
-      body.appendChild(otherButton);
-      button.focus();
-
-      const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef });
-
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      flushMicrotasks();
+         const dialogRef =
+             dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef, restoreFocus : false});
 
-      expect(document.activeElement!.id)
-          .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
 
-      // Start the closing sequence and move focus out of dialog.
-      dialogRef.close();
-      otherButton.focus();
+         expect(document.activeElement!.id)
+             .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
-      expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to be on the alternate button.');
+         dialogRef.close();
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         tick(500);
 
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      flush();
+         expect(document.activeElement!.id)
+             .not.toBe('dialog-trigger', 'Expected focus not to have been restored.');
 
-      expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to stay on the alternate button.');
-
-      body.removeChild(button);
-      body.removeChild(otherButton);
-    }));
+         document.body.removeChild(button);
+       }));
 
+    it('should not move focus if it was moved outside the dialog while animating', fakeAsync(() => {
+         // Create a element that has focus before the dialog is opened.
+         const button = document.createElement('button');
+         const otherButton = document.createElement('button');
+         const body = document.body;
+         button.id = 'dialog-trigger';
+         otherButton.id = 'other-button';
+         body.appendChild(button);
+         body.appendChild(otherButton);
+         button.focus();
+
+         const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flushMicrotasks();
+
+         expect(document.activeElement!.id)
+             .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
+
+         // Start the closing sequence and move focus out of dialog.
+         dialogRef.close();
+         otherButton.focus();
+
+         expect(document.activeElement!.id)
+             .toBe('other-button', 'Expected focus to be on the alternate button.');
+
+         flushMicrotasks();
+         viewContainerFixture.detectChanges();
+         flush();
+
+         expect(document.activeElement!.id)
+             .toBe('other-button', 'Expected focus to stay on the alternate button.');
+
+         body.removeChild(button);
+         body.removeChild(otherButton);
+       }));
   });
 
   describe('dialog content elements', () => {
@@ -1410,7 +1326,7 @@ describe('MatDialog', () => {
 
     describe('inside component dialog', () => {
       beforeEach(fakeAsync(() => {
-        dialogRef = dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+        dialogRef = dialog.open(ContentElementDialog, {viewContainerRef : testViewContainerRef});
         viewContainerFixture.detectChanges();
         flush();
       }));
@@ -1423,9 +1339,8 @@ describe('MatDialog', () => {
         const fixture = TestBed.createComponent(ComponentWithContentElementTemplateRef);
         fixture.detectChanges();
 
-        dialogRef = dialog.open(fixture.componentInstance.templateRef, {
-          viewContainerRef: testViewContainerRef
-        });
+        dialogRef = dialog.open(fixture.componentInstance.templateRef,
+                                {viewContainerRef : testViewContainerRef});
 
         viewContainerFixture.detectChanges();
         flush();
@@ -1436,14 +1351,15 @@ describe('MatDialog', () => {
 
     function runContentElementTests() {
       it('should close the dialog when clicking on the close button', fakeAsync(() => {
-        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
+           expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
 
-        (overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement).click();
-        viewContainerFixture.detectChanges();
-        flush();
+           (overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement)
+               .click();
+           viewContainerFixture.detectChanges();
+           flush();
 
-        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(0);
-      }));
+           expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(0);
+         }));
 
       it('should not close if [mat-dialog-close] is applied on a non-button node', () => {
         expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
@@ -1454,9 +1370,9 @@ describe('MatDialog', () => {
       });
 
       it('should allow for a user-specified aria-label on the close button', fakeAsync(() => {
-        let button = overlayContainerElement.querySelector('.close-with-aria-label')!;
-        expect(button.getAttribute('aria-label')).toBe('Best close button ever');
-      }));
+           let button = overlayContainerElement.querySelector('.close-with-aria-label')!;
+           expect(button.getAttribute('aria-label')).toBe('Best close button ever');
+         }));
 
       it('should set the "type" attribute of the close button if not set manually', () => {
         let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!;
@@ -1471,45 +1387,47 @@ describe('MatDialog', () => {
       });
 
       it('should return the [mat-dialog-close] result when clicking the close button',
-        fakeAsync(() => {
-          let afterCloseCallback = jasmine.createSpy('afterClose callback');
-          dialogRef.afterClosed().subscribe(afterCloseCallback);
+         fakeAsync(() => {
+           let afterCloseCallback = jasmine.createSpy('afterClose callback');
+           dialogRef.afterClosed().subscribe(afterCloseCallback);
 
-          (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
-          viewContainerFixture.detectChanges();
-          flush();
+           (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
+           viewContainerFixture.detectChanges();
+           flush();
 
-          expect(afterCloseCallback).toHaveBeenCalledWith(true);
-        }));
+           expect(afterCloseCallback).toHaveBeenCalledWith(true);
+         }));
 
       it('should set the aria-labelledby attribute to the id of the title', fakeAsync(() => {
-        let title = overlayContainerElement.querySelector('[mat-dialog-title]')!;
-        let container = overlayContainerElement.querySelector('mat-dialog-container')!;
-
-        flush();
-        viewContainerFixture.detectChanges();
-
-        expect(title.id).toBeTruthy('Expected title element to have an id.');
-        expect(container.getAttribute('aria-labelledby'))
-            .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
-      }));
-
-      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
-        let actions =
-          overlayContainerElement.querySelector('mat-dialog-actions')!;
-
-        expect(actions).not.toHaveClass('mat-dialog-actions-align-center', 'Expected action buttons to not have class align-center');
-        expect(actions).toHaveClass('mat-dialog-actions-align-end', 'Expected action buttons to have class align-end');
-      });
+           let title = overlayContainerElement.querySelector('[mat-dialog-title]')!;
+           let container = overlayContainerElement.querySelector('mat-dialog-container')!;
+
+           flush();
+           viewContainerFixture.detectChanges();
+
+           expect(title.id).toBeTruthy('Expected title element to have an id.');
+           expect(container.getAttribute('aria-labelledby'))
+               .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
+         }));
+
+      it('should add align-* class according to given [align] input in [mat-dialog-actions]',
+         () => {
+           let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+           expect(actions).not.toHaveClass(
+               'mat-dialog-actions-align-center',
+               'Expected action buttons to not have class mat-dialog-actions-align-center');
+           expect(actions).toHaveClass(
+               'mat-dialog-actions-align-end',
+               'Expected action buttons to have class mat-dialog-actions-align-end');
+         });
     }
   });
 
   describe('aria-labelledby', () => {
     it('should be able to set a custom aria-labelledby', () => {
-      dialog.open(PizzaMsg, {
-        ariaLabelledBy: 'Labelled By',
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg,
+                  {ariaLabelledBy : 'Labelled By', viewContainerRef : testViewContainerRef});
       viewContainerFixture.detectChanges();
 
       const container = overlayContainerElement.querySelector('mat-dialog-container')!;
@@ -1517,44 +1435,41 @@ describe('MatDialog', () => {
     });
 
     it('should not set the aria-labelledby automatically if it has an aria-label ' +
-      'and an aria-labelledby', fakeAsync(() => {
-        dialog.open(ContentElementDialog, {
-          ariaLabel: 'Hello there',
-          ariaLabelledBy: 'Labelled By',
-          viewContainerRef: testViewContainerRef
-        });
-        viewContainerFixture.detectChanges();
-        tick();
-        viewContainerFixture.detectChanges();
-
-        const container = overlayContainerElement.querySelector('mat-dialog-container')!;
-        expect(container.hasAttribute('aria-labelledby')).toBe(false);
-    }));
+           'and an aria-labelledby',
+       fakeAsync(() => {
+         dialog.open(ContentElementDialog, {
+           ariaLabel : 'Hello there',
+           ariaLabelledBy : 'Labelled By',
+           viewContainerRef : testViewContainerRef
+         });
+         viewContainerFixture.detectChanges();
+         tick();
+         viewContainerFixture.detectChanges();
+
+         const container = overlayContainerElement.querySelector('mat-dialog-container')!;
+         expect(container.hasAttribute('aria-labelledby')).toBe(false);
+       }));
 
     it('should set the aria-labelledby attribute to the config provided aria-labelledby ' +
-      'instead of the mat-dialog-title id', fakeAsync(() => {
-        dialog.open(ContentElementDialog, {
-          ariaLabelledBy: 'Labelled By',
-          viewContainerRef: testViewContainerRef
-        });
-        viewContainerFixture.detectChanges();
-        flush();
-        let title = overlayContainerElement.querySelector('[mat-dialog-title]')!;
-        let container = overlayContainerElement.querySelector('mat-dialog-container')!;
-        flush();
-        viewContainerFixture.detectChanges();
-
-        expect(title.id).toBeTruthy('Expected title element to have an id.');
-        expect(container.getAttribute('aria-labelledby')).toBe('Labelled By');
-    }));
+           'instead of the mat-dialog-title id',
+       fakeAsync(() => {
+         dialog.open(ContentElementDialog,
+                     {ariaLabelledBy : 'Labelled By', viewContainerRef : testViewContainerRef});
+         viewContainerFixture.detectChanges();
+         flush();
+         let title = overlayContainerElement.querySelector('[mat-dialog-title]')!;
+         let container = overlayContainerElement.querySelector('mat-dialog-container')!;
+         flush();
+         viewContainerFixture.detectChanges();
+
+         expect(title.id).toBeTruthy('Expected title element to have an id.');
+         expect(container.getAttribute('aria-labelledby')).toBe('Labelled By');
+       }));
   });
 
   describe('aria-label', () => {
     it('should be able to set a custom aria-label', () => {
-      dialog.open(PizzaMsg, {
-        ariaLabel: 'Hello there',
-        viewContainerRef: testViewContainerRef
-      });
+      dialog.open(PizzaMsg, {ariaLabel : 'Hello there', viewContainerRef : testViewContainerRef});
       viewContainerFixture.detectChanges();
 
       const container = overlayContainerElement.querySelector('mat-dialog-container')!;
@@ -1562,33 +1477,31 @@ describe('MatDialog', () => {
     });
 
     it('should not set the aria-labelledby automatically if it has an aria-label', fakeAsync(() => {
-      dialog.open(ContentElementDialog, {
-        ariaLabel: 'Hello there',
-        viewContainerRef: testViewContainerRef
-      });
-      viewContainerFixture.detectChanges();
-      tick();
-      viewContainerFixture.detectChanges();
-
-      const container = overlayContainerElement.querySelector('mat-dialog-container')!;
-      expect(container.hasAttribute('aria-labelledby')).toBe(false);
-    }));
+         dialog.open(ContentElementDialog,
+                     {ariaLabel : 'Hello there', viewContainerRef : testViewContainerRef});
+         viewContainerFixture.detectChanges();
+         tick();
+         viewContainerFixture.detectChanges();
+
+         const container = overlayContainerElement.querySelector('mat-dialog-container')!;
+         expect(container.hasAttribute('aria-labelledby')).toBe(false);
+       }));
   });
 
   it('should dispose backdrop if containing dialog view is destroyed', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    viewContainerFixture.detectChanges();
-    flush();
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
+       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
 
-    dialogRef.close();
-    viewContainerFixture.componentInstance.showChildView = false;
-    viewContainerFixture.detectChanges();
-    flush();
+       dialogRef.close();
+       viewContainerFixture.componentInstance.showChildView = false;
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
-  }));
+       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
+     }));
 });
 
 describe('MatDialog with a parent MatDialog', () => {
@@ -1599,21 +1512,24 @@ describe('MatDialog with a parent MatDialog', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      declarations: [ComponentThatProvidesMatDialog],
-      providers: [
-        {provide: OverlayContainer, useFactory: () => {
-          overlayContainerElement = document.createElement('div');
-          return {getContainerElement: () => overlayContainerElement};
-        }},
-        {provide: Location, useClass: SpyLocation}
+      imports : [ MatDialogModule, DialogTestModule ],
+      declarations : [ ComponentThatProvidesMatDialog ],
+      providers : [
+        {
+          provide : OverlayContainer,
+          useFactory : () => {
+            overlayContainerElement = document.createElement('div');
+            return {getContainerElement : () => overlayContainerElement};
+          }
+        },
+        {provide : Location, useClass : SpyLocation}
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog], (d: MatDialog) => {
+  beforeEach(inject([ MatDialog ], (d: MatDialog) => {
     parentDialog = d;
 
     fixture = TestBed.createComponent(ComponentThatProvidesMatDialog);
@@ -1621,68 +1537,66 @@ describe('MatDialog with a parent MatDialog', () => {
     fixture.detectChanges();
   }));
 
-  afterEach(() => {
-    overlayContainerElement.innerHTML = '';
-  });
+  afterEach(() => { overlayContainerElement.innerHTML = ''; });
 
   it('should close dialogs opened by a parent when calling closeAll on a child MatDialog',
-    fakeAsync(() => {
-      parentDialog.open(PizzaMsg);
-      fixture.detectChanges();
-      flush();
+     fakeAsync(() => {
+       parentDialog.open(PizzaMsg);
+       fixture.detectChanges();
+       flush();
 
-      expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+       expect(overlayContainerElement.textContent)
+           .toContain('Pizza', 'Expected a dialog to be opened');
 
-      childDialog.closeAll();
-      fixture.detectChanges();
-      flush();
+       childDialog.closeAll();
+       fixture.detectChanges();
+       flush();
 
-      expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on child MatDialog to close dialog opened by parent');
-    }));
+       expect(overlayContainerElement.textContent!.trim())
+           .toBe('', 'Expected closeAll on child MatDialog to close dialog opened by parent');
+     }));
 
   it('should close dialogs opened by a child when calling closeAll on a parent MatDialog',
-    fakeAsync(() => {
-      childDialog.open(PizzaMsg);
-      fixture.detectChanges();
+     fakeAsync(() => {
+       childDialog.open(PizzaMsg);
+       fixture.detectChanges();
 
-      expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+       expect(overlayContainerElement.textContent)
+           .toContain('Pizza', 'Expected a dialog to be opened');
 
-      parentDialog.closeAll();
-      fixture.detectChanges();
-      flush();
+       parentDialog.closeAll();
+       fixture.detectChanges();
+       flush();
 
-      expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on parent MatDialog to close dialog opened by child');
-    }));
+       expect(overlayContainerElement.textContent!.trim())
+           .toBe('', 'Expected closeAll on parent MatDialog to close dialog opened by child');
+     }));
 
   it('should close the top dialog via the escape key', fakeAsync(() => {
-    childDialog.open(PizzaMsg);
+       childDialog.open(PizzaMsg);
 
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
-    fixture.detectChanges();
-    flush();
+       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+       fixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
+     }));
 
   it('should not close the parent dialogs when a child is destroyed', fakeAsync(() => {
-    parentDialog.open(PizzaMsg);
-    fixture.detectChanges();
-    flush();
+       parentDialog.open(PizzaMsg);
+       fixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
+       expect(overlayContainerElement.textContent)
+           .toContain('Pizza', 'Expected a dialog to be opened');
 
-    childDialog.ngOnDestroy();
-    fixture.detectChanges();
-    flush();
+       childDialog.ngOnDestroy();
+       fixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
-  }));
+       expect(overlayContainerElement.textContent)
+           .toContain('Pizza', 'Expected a dialog to be opened');
+     }));
 });
 
 describe('MatDialog with default options', () => {
@@ -1695,37 +1609,34 @@ describe('MatDialog with default options', () => {
 
   beforeEach(fakeAsync(() => {
     const defaultConfig = {
-      hasBackdrop: false,
-      disableClose: true,
-      width: '100px',
-      height: '100px',
-      minWidth: '50px',
-      minHeight: '50px',
-      maxWidth: '150px',
-      maxHeight: '150px',
-      autoFocus: false,
+      hasBackdrop : false,
+      disableClose : true,
+      width : '100px',
+      height : '100px',
+      minWidth : '50px',
+      minHeight : '50px',
+      maxWidth : '150px',
+      maxHeight : '150px',
+      autoFocus : false,
     };
 
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
-      providers: [
-        {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: defaultConfig},
+      imports : [ MatDialogModule, DialogTestModule ],
+      providers : [
+        {provide : MAT_DIALOG_DEFAULT_OPTIONS, useValue : defaultConfig},
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, OverlayContainer],
-    (d: MatDialog, oc: OverlayContainer) => {
-      dialog = d;
-      overlayContainer = oc;
-      overlayContainerElement = oc.getContainerElement();
-    }));
+  beforeEach(inject([ MatDialog, OverlayContainer ], (d: MatDialog, oc: OverlayContainer) => {
+    dialog = d;
+    overlayContainer = oc;
+    overlayContainerElement = oc.getContainerElement();
+  }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   beforeEach(() => {
     viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
@@ -1735,7 +1646,7 @@ describe('MatDialog with default options', () => {
   });
 
   it('should use the provided defaults', () => {
-    dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
 
     viewContainerFixture.detectChanges();
 
@@ -1756,25 +1667,22 @@ describe('MatDialog with default options', () => {
   });
 
   it('should be overridable by open() options', fakeAsync(() => {
-    dialog.open(PizzaMsg, {
-      hasBackdrop: true,
-      disableClose: false,
-      viewContainerRef: testViewContainerRef
-    });
+       dialog.open(
+           PizzaMsg,
+           {hasBackdrop : true, disableClose : false, viewContainerRef : testViewContainerRef});
 
-    viewContainerFixture.detectChanges();
+       viewContainerFixture.detectChanges();
 
-    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
 
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
-    viewContainerFixture.detectChanges();
-    flush();
+       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+       viewContainerFixture.detectChanges();
+       flush();
 
-    expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
-  }));
+       expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy();
+     }));
 });
 
-
 describe('MatDialog with animations enabled', () => {
   let dialog: MatDialog;
   let overlayContainer: OverlayContainer;
@@ -1784,13 +1692,13 @@ describe('MatDialog with animations enabled', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule, BrowserAnimationsModule],
+      imports : [ MatDialogModule, DialogTestModule, BrowserAnimationsModule ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, OverlayContainer], (d: MatDialog, oc: OverlayContainer) => {
+  beforeEach(inject([ MatDialog, OverlayContainer ], (d: MatDialog, oc: OverlayContainer) => {
     dialog = d;
     overlayContainer = oc;
 
@@ -1799,65 +1707,61 @@ describe('MatDialog with animations enabled', () => {
     testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
   }));
 
-  afterEach(() => {
-    overlayContainer.ngOnDestroy();
-  });
+  afterEach(() => { overlayContainer.ngOnDestroy(); });
 
   it('should return the current state of the dialog', fakeAsync(() => {
-    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    // Duration of the close animation in milliseconds. Extracted from the
-    // Angular animations definition of the dialog.
-    const dialogCloseDuration = 75;
-
-    expect(dialogRef.getState()).toBe(MatDialogState.OPEN);
-    dialogRef.close();
-    viewContainerFixture.detectChanges();
-
-    expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
-
-    // Ensure that the closing state is still set if half of the animation has
-    // passed by. The dialog state should be only set to `closed` when the dialog
-    // finished the close animation.
-    tick(dialogCloseDuration / 2);
-    expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
-
-    // Flush the remaining duration of the closing animation. We flush all other remaining
-    // tasks (e.g. the fallback close timeout) to avoid fakeAsync pending timer failures.
-    flush();
-    expect(dialogRef.getState()).toBe(MatDialogState.CLOSED);
-  }));
+       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef : testViewContainerRef});
+       // Duration of the close animation in milliseconds. Extracted from the
+       // Angular animations definition of the dialog.
+       const dialogCloseDuration = 75;
+
+       expect(dialogRef.getState()).toBe(MatDialogState.OPEN);
+       dialogRef.close();
+       viewContainerFixture.detectChanges();
+
+       expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
+
+       // Ensure that the closing state is still set if half of the animation has
+       // passed by. The dialog state should be only set to `closed` when the dialog
+       // finished the close animation.
+       tick(dialogCloseDuration / 2);
+       expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
+
+       // Flush the remaining duration of the closing animation. We flush all other remaining
+       // tasks (e.g. the fallback close timeout) to avoid fakeAsync pending timer failures.
+       flush();
+       expect(dialogRef.getState()).toBe(MatDialogState.CLOSED);
+     }));
 });
 
-@Directive({selector: 'dir-with-view-container'})
+@Directive({selector : 'dir-with-view-container'})
 class DirectiveWithViewContainer {
-  constructor(public viewContainerRef: ViewContainerRef) { }
+  constructor(public viewContainerRef: ViewContainerRef) {}
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: 'hello',
+  changeDetection : ChangeDetectionStrategy.OnPush,
+  template : 'hello',
 })
 class ComponentWithOnPushViewContainer {
-  constructor(public viewContainerRef: ViewContainerRef) { }
+  constructor(public viewContainerRef: ViewContainerRef) {}
 }
 
 @Component({
-  selector: 'arbitrary-component',
-  template: `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
+  selector : 'arbitrary-component',
+  template : `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
 })
 class ComponentWithChildViewContainer {
   showChildView = true;
 
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
-  get childViewContainer() {
-    return this.childWithViewContainer.viewContainerRef;
-  }
+  get childViewContainer() { return this.childWithViewContainer.viewContainerRef; }
 }
 
 @Component({
-  selector: 'arbitrary-component-with-template-ref',
-  template: `<ng-template let-data let-dialogRef="dialogRef">
+  selector : 'arbitrary-component-with-template-ref',
+  template : `<ng-template let-data let-dialogRef="dialogRef">
       Cheese {{localValue}} {{data?.value}}{{setDialogRef(dialogRef)}}</ng-template>`,
 })
 class ComponentWithTemplateRef {
@@ -1873,15 +1777,14 @@ class ComponentWithTemplateRef {
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({template : '<p>Pizza</p> <input> <button>Close</button>'})
 class PizzaMsg {
-  constructor(public dialogRef: MatDialogRef<PizzaMsg>,
-              public dialogInjector: Injector,
+  constructor(public dialogRef: MatDialogRef<PizzaMsg>, public dialogInjector: Injector,
               public directionality: Directionality) {}
 }
 
 @Component({
-  template: `
+  template : `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
     <mat-dialog-actions align="end">
@@ -1896,10 +1799,11 @@ class PizzaMsg {
     </mat-dialog-actions>
   `
 })
-class ContentElementDialog {}
+class ContentElementDialog {
+}
 
 @Component({
-  template: `
+  template : `
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
@@ -1920,22 +1824,20 @@ class ComponentWithContentElementTemplateRef {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 }
 
-@Component({
-  template: '',
-  providers: [MatDialog]
-})
+@Component({template : '', providers : [ MatDialog ]})
 class ComponentThatProvidesMatDialog {
   constructor(public dialog: MatDialog) {}
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({template: ''})
+@Component({template : ''})
 class DialogWithInjectedData {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
 }
 
-@Component({template: '<p>Pasta</p>'})
-class DialogWithoutFocusableElements {}
+@Component({template : '<p>Pasta</p>'})
+class DialogWithoutFocusableElements {
+}
 
 // Create a real (non-test) NgModule as a workaround for
 // https://github.com/angular/angular/issues/10760
@@ -1952,10 +1854,10 @@ const TEST_DIRECTIVES = [
 ];
 
 @NgModule({
-  imports: [MatDialogModule, NoopAnimationsModule],
-  exports: TEST_DIRECTIVES,
-  declarations: TEST_DIRECTIVES,
-  entryComponents: [
+  imports : [ MatDialogModule, NoopAnimationsModule ],
+  exports : TEST_DIRECTIVES,
+  declarations : TEST_DIRECTIVES,
+  entryComponents : [
     ComponentWithChildViewContainer,
     ComponentWithTemplateRef,
     PizzaMsg,
@@ -1964,4 +1866,5 @@ const TEST_DIRECTIVES = [
     DialogWithoutFocusableElements,
   ],
 })
-class DialogTestModule { }
+class DialogTestModule {
+}
diff --git a/tools/public_api_guard/material/dialog.d.ts b/tools/public_api_guard/material/dialog.d.ts
index 52dd272a5bfe..6f952a3de2d0 100644
--- a/tools/public_api_guard/material/dialog.d.ts
+++ b/tools/public_api_guard/material/dialog.d.ts
@@ -74,7 +74,8 @@ export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
 }
 
 export declare class MatDialogActions {
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    align?: 'center' | 'end';
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatDialogActions, never>;
 }
 

From 8d367c1ef4b10ae865d5e08b101189781eed5263 Mon Sep 17 00:00:00 2001
From: Jean-Philippe <jeanphilippe.green@gmail.com>
Date: Sun, 9 Jan 2022 23:05:54 +0100
Subject: [PATCH 3/7] Update comments in dialog.scss for more clarity

---
 src/material-experimental/mdc-dialog/dialog.scss | 3 ++-
 src/material/dialog/dialog.scss                  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index ba994299dfd2..0eec7117019e 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -29,7 +29,8 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   // aligns actions at the end of the container.
   justify-content: start;
 
-  // .align-center and .align-end are set by directive input "align"
+  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
   &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index 4c8beafb8547..6ba8ad382925 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -56,7 +56,7 @@ $button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$padding;
 
-  // .align-center and .align-end are set by directive input "align"
+  // .mat-dialog-actions-align-{center|end} are set by directive input "align"
   // [align='center'] and [align='right'] are kept for backwards compability
   &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;

From d6deb456240553b299aa6e30b496274ccf1b8e8d Mon Sep 17 00:00:00 2001
From: Jean-Philippe <jeanphilippe.green@gmail.com>
Date: Sun, 9 Jan 2022 23:30:24 +0100
Subject: [PATCH 4/7] Use 'start' as default instead of undefined for align
 attribute in dialog actions

---
 .../mdc-dialog/dialog-content-directives.ts                     | 2 +-
 src/material/dialog/dialog-content-directives.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 6cd76b9e283c..38de7efaf900 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -148,7 +148,7 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
-  @Input() align?: 'center' | 'end' = undefined;
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
 /**
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 29f5689d363c..0751984eb13d 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -152,7 +152,7 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
-  @Input() align?: 'center' | 'end' = undefined;
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
 /**

From c87c4aae513d840f6d621ac172915cc25ff5885b Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Mon, 10 Jan 2022 00:21:57 +0100
Subject: [PATCH 5/7] Revert weird changes to dialog.spec.ts

---
 .../mdc-dialog/dialog.spec.ts                 |  3 +-
 src/material/dialog/dialog.spec.ts            | 46 ++++++-------------
 2 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index 0fa2c751b381..93b0df93f524 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -39,7 +39,6 @@ import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {numbers} from '@material/dialog';
 import {Subject} from 'rxjs';
-
 import {
   MatDialog,
   MatDialogModule,
@@ -1672,7 +1671,7 @@ describe('MDC-based MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index ae89099400c7..176271f210bf 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1,21 +1,16 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
-import {A, ESCAPE} from '@angular/cdk/keycodes';
-import {Overlay, OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
-  createKeyboardEvent,
-  dispatchEvent,
-  dispatchKeyboardEvent,
-  dispatchMouseEvent,
-  patchElementFocus,
-} from '@angular/cdk/testing/private';
-import {Location} from '@angular/common';
-import {SpyLocation} from '@angular/common/testing';
+  ComponentFixture,
+  fakeAsync,
+  flushMicrotasks,
+  inject,
+  TestBed,
+  tick,
+  flush,
+} from '@angular/core/testing';
 import {
   ChangeDetectionStrategy,
   Component,
-  ComponentFactoryResolver,
   Directive,
   Inject,
   Injector,
@@ -26,15 +21,6 @@ import {
   NgZone,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  inject,
-  TestBed,
-  tick,
-} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Location} from '@angular/common';
@@ -54,13 +40,12 @@ import {
 } from '../../cdk/testing/private';
 import {
   MAT_DIALOG_DATA,
-  MAT_DIALOG_DEFAULT_OPTIONS,
   MatDialog,
   MatDialogModule,
   MatDialogRef,
+  MAT_DIALOG_DEFAULT_OPTIONS,
   MatDialogState,
 } from './index';
-
 import {Subject} from 'rxjs';
 
 describe('MatDialog', () => {
@@ -1396,8 +1381,7 @@ describe('MatDialog', () => {
       button.focus();
 
       // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an
-      // element.
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
       patchElementFocus(button);
 
       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
@@ -1430,8 +1414,7 @@ describe('MatDialog', () => {
       button.focus();
 
       // Patch the element focus after the initial and real focus, because otherwise the
-      // `activeElement` won't be set, and the dialog won't be able to restore focus to an
-      // element.
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
       patchElementFocus(button);
 
       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
@@ -1640,10 +1623,9 @@ describe('MatDialog', () => {
         'Expected the focus to change when dialog was opened.',
       );
 
+      // Start the closing sequence and move focus out of dialog.
       dialogRef.close();
-      flushMicrotasks();
-      viewContainerFixture.detectChanges();
-      tick(500);
+      otherButton.focus();
 
       expect(document.activeElement!.id)
         .withContext('Expected focus to be on the alternate button.')
@@ -1752,7 +1734,7 @@ describe('MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)

From 77fca709f57d6d9396981bef4589a932cb1cae72 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Mon, 10 Jan 2022 01:20:43 +0100
Subject: [PATCH 6/7] Change actionsAlignment type in dialog demo

---
 src/dev-app/dialog/dialog-demo.ts         | 4 ++--
 src/dev-app/mdc-dialog/mdc-dialog-demo.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 3f1075f2eab0..cc2ce89bcabd 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -21,7 +21,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: 'end' | 'center' | undefined;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -177,7 +177,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: 'end' | 'center' | undefined;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
index f294b14f4293..10e61c2e8ffd 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
@@ -29,7 +29,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -194,7 +194,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 

From 815cf8f26b2e615e37d00dee0b3471973119a42c Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Mon, 10 Jan 2022 01:23:12 +0100
Subject: [PATCH 7/7] Use directive binding in mdc-dialog demo for align

---
 src/dev-app/mdc-dialog/mdc-dialog-demo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
index 10e61c2e8ffd..92e750ea9738 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
@@ -173,7 +173,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"