feat(dialog): support using dialog content directives with template dialogs (#9379)

Previously the `matDialogClose`, `matDialogTitle` etc. directives would only work correctly inside component dialogs, because using DI to get the dialog ref doesn't work inside template dialogs. These changes add a fallback that finds the dialog ref based on the id of the closest dialog container.

Fixes #5412.

Author: crisbeto

src/lib/dialog/dialog-container.ts

@@ -60,6 +60,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
   host: {
     'class': 'mat-dialog-container',
     'tabindex': '-1',
+    '[attr.id]': '_id',
     '[attr.role]': '_config?.role',
     '[attr.aria-labelledby]': '_config?.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config?.ariaLabel',
@@ -91,6 +92,9 @@ export class MatDialogContainer extends BasePortalOutlet {
   /** ID of the element that should be considered as the dialog's label. */
   _ariaLabelledBy: string | null = null;
 
+  /** ID for the container DOM element. */
+  _id: string;
+
   constructor(
     private _elementRef: ElementRef,
     private _focusTrapFactory: FocusTrapFactory,

src/lib/dialog/dialog-content-directives.ts

@@ -6,9 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Input, OnChanges, OnInit, Optional, SimpleChanges} from '@angular/core';
+import {
+  Directive,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  SimpleChanges,
+  ElementRef,
+} from '@angular/core';
+import {MatDialog} from './dialog';
 import {MatDialogRef} from './dialog-ref';
-import {MatDialogContainer} from './dialog-container';
 
 /** Counter used to generate unique IDs for dialog elements. */
 let dialogElementUid = 0;
@@ -25,7 +33,7 @@ let dialogElementUid = 0;
     'type': 'button', // Prevents accidental form submits.
   }
 })
-export class MatDialogClose implements OnChanges {
+export class MatDialogClose implements OnInit, OnChanges {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string = 'Close dialog';
 
@@ -34,7 +42,21 @@ export class MatDialogClose implements OnChanges {
 
   @Input('matDialogClose') _matDialogClose: any;
 
-  constructor(public dialogRef: MatDialogRef<any>) { }
+  constructor(
+    @Optional() public dialogRef: MatDialogRef<any>,
+    private _elementRef: ElementRef,
+    private _dialog: MatDialog) {}
+
+  ngOnInit() {
+    if (!this.dialogRef) {
+      // When this directive is included in a dialog via TemplateRef (rather than being
+      // in a Component), the DialogRef isn't available via injection because embedded
+      // views cannot be given a custom injector. Instead, we look up the DialogRef by
+      // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
+      // be resolved at constructor time.
+      this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
+    }
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     const proxiedChange = changes._matDialogClose || changes._matDialogCloseResult;
@@ -59,11 +81,24 @@ export class MatDialogClose implements OnChanges {
 export class MatDialogTitle implements OnInit {
   @Input() id = `mat-dialog-title-${dialogElementUid++}`;
 
-  constructor(@Optional() private _container: MatDialogContainer) { }
+  constructor(
+    @Optional() private _dialogRef: MatDialogRef<any>,
+    private _elementRef: ElementRef,
+    private _dialog: MatDialog) {}
 
   ngOnInit() {
-    if (this._container && !this._container._ariaLabelledBy) {
-      Promise.resolve().then(() => this._container._ariaLabelledBy = this.id);
+    if (!this._dialogRef) {
+      this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
+    }
+
+    if (this._dialogRef) {
+      Promise.resolve().then(() => {
+        const container = this._dialogRef._containerInstance;
+
+        if (container && !container._ariaLabelledBy) {
+          container._ariaLabelledBy = this.id;
+        }
+      });
     }
   }
 }
@@ -76,7 +111,7 @@ export class MatDialogTitle implements OnInit {
   selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
   host: {'class': 'mat-dialog-content'}
 })
-export class MatDialogContent { }
+export class MatDialogContent {}
 
 
 /**
@@ -87,4 +122,20 @@ export class MatDialogContent { }
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
   host: {'class': 'mat-dialog-actions'}
 })
-export class MatDialogActions { }
+export class MatDialogActions {}
+
+
+/**
+ * Finds the closest MatDialogRef to an element by looking at the DOM.
+ * @param element Element relative to which to look for a dialog.
+ * @param openDialogs References to the currently-open dialogs.
+ */
+function getClosestDialog(element: ElementRef, openDialogs: MatDialogRef<any>[]) {
+  let parent: HTMLElement | null = element.nativeElement.parentElement;
+
+  while (parent && !parent.classList.contains('mat-dialog-container')) {
+    parent = parent.parentElement;
+  }
+
+  return parent ? openDialogs.find(dialog => dialog.id === parent!.id) : null;
+}

src/lib/dialog/dialog-ref.ts

@@ -50,10 +50,13 @@ export class MatDialogRef<T, R = any> {
 
   constructor(
     private _overlayRef: OverlayRef,
-    private _containerInstance: MatDialogContainer,
+    public _containerInstance: MatDialogContainer,
     location?: Location,
     readonly id: string = `mat-dialog-${uniqueId++}`) {
 
+    // Pass the id along to the container.
+    _containerInstance._id = id;
+
     // Emit when opening animation completes
     _containerInstance._animationStateChanged.pipe(
       filter(event => event.phaseName === 'done' && event.toState === 'enter'),

src/lib/dialog/dialog.spec.ts

@@ -958,72 +958,88 @@ describe('MatDialog', () => {
   });
 
   describe('dialog content elements', () => {
-    let dialogRef: MatDialogRef<ContentElementDialog>;
+    let dialogRef: MatDialogRef<any>;
 
-    beforeEach(fakeAsync(() => {
-      dialogRef = dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
-      viewContainerFixture.detectChanges();
-      flush();
-    }));
-
-    it('should close the dialog when clicking on the close button', fakeAsync(() => {
-      expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
+    describe('inside component dialog', () => {
+      beforeEach(fakeAsync(() => {
+        dialogRef = dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+        viewContainerFixture.detectChanges();
+        flush();
+      }));
 
-      (overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement).click();
-      viewContainerFixture.detectChanges();
-      flush();
+      runContentElementTests();
+    });
 
-      expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(0);
-    }));
+    describe('inside template portal', () => {
+      beforeEach(fakeAsync(() => {
+        const fixture = TestBed.createComponent(ComponentWithContentElementTemplateRef);
+        fixture.detectChanges();
 
-    it('should not close the dialog if [mat-dialog-close] is applied on a non-button node', () => {
-      expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
+        dialogRef = dialog.open(fixture.componentInstance.templateRef, {
+          viewContainerRef: testViewContainerRef
+        });
 
-      (overlayContainerElement.querySelector('div[mat-dialog-close]') as HTMLElement).click();
+        viewContainerFixture.detectChanges();
+        flush();
+      }));
 
-      expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
+      runContentElementTests();
     });
 
-    it('should allow for a user-specified aria-label on the close button', fakeAsync(() => {
-      let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!;
+    function runContentElementTests() {
+      it('should close the dialog when clicking on the close button', fakeAsync(() => {
+        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
 
-      dialogRef.componentInstance.closeButtonAriaLabel = 'Best close button ever';
-      viewContainerFixture.detectChanges();
-      flush();
+        (overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement).click();
+        viewContainerFixture.detectChanges();
+        flush();
 
-      expect(button.getAttribute('aria-label')).toBe('Best close button ever');
-    }));
+        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(0);
+      }));
 
-    it('should override the "type" attribute of the close button', () => {
-      let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!;
+      it('should not close if [mat-dialog-close] is applied on a non-button node', () => {
+        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
 
-      expect(button.getAttribute('type')).toBe('button');
-    });
+        (overlayContainerElement.querySelector('div[mat-dialog-close]') as HTMLElement).click();
 
-    it('should return the [mat-dialog-close] result when clicking the close button',
-      fakeAsync(() => {
-        let afterCloseCallback = jasmine.createSpy('afterClose callback');
-        dialogRef.afterClosed().subscribe(afterCloseCallback);
-
-        (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
-        viewContainerFixture.detectChanges();
-        flush();
+        expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
+      });
 
-        expect(afterCloseCallback).toHaveBeenCalledWith(true);
+      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');
       }));
 
-    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')!;
+      it('should override the "type" attribute of the close button', () => {
+        let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!;
 
-      flush();
-      viewContainerFixture.detectChanges();
+        expect(button.getAttribute('type')).toBe('button');
+      });
 
-      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 return the [mat-dialog-close] result when clicking the close button',
+        fakeAsync(() => {
+          let afterCloseCallback = jasmine.createSpy('afterClose callback');
+          dialogRef.afterClosed().subscribe(afterCloseCallback);
+
+          (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
+          viewContainerFixture.detectChanges();
+          flush();
+
+          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.');
+      }));
+    }
   });
 
   describe('aria-label', () => {
@@ -1277,14 +1293,37 @@ class PizzaMsg {
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
     <mat-dialog-actions>
-      <button mat-dialog-close [aria-label]="closeButtonAriaLabel">Close</button>
+      <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
+      <button
+        class="close-with-aria-label"
+        aria-label="Best close button ever"
+        [mat-dialog-close]="true">Close</button>
       <div mat-dialog-close>Should not close</div>
     </mat-dialog-actions>
   `
 })
-class ContentElementDialog {
-  closeButtonAriaLabel: string;
+class ContentElementDialog {}
+
+@Component({
+  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>
+        <button mat-dialog-close>Close</button>
+        <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
+        <button
+          class="close-with-aria-label"
+          aria-label="Best close button ever"
+          [mat-dialog-close]="true">Close</button>
+        <div mat-dialog-close>Should not close</div>
+      </mat-dialog-actions>
+    </ng-template>
+  `
+})
+class ComponentWithContentElementTemplateRef {
+  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 }
 
 @Component({
@@ -1314,7 +1353,8 @@ const TEST_DIRECTIVES = [
   ComponentWithOnPushViewContainer,
   ContentElementDialog,
   DialogWithInjectedData,
-  DialogWithoutFocusableElements
+  DialogWithoutFocusableElements,
+  ComponentWithContentElementTemplateRef,
 ];
 
 @NgModule({