feat(material/dialog): expose rendered ComponentRef

Exposes the `ComponentRef` to the component that is rendered inside of a dialog container. This allows users to interact with the component's inputs.

Fixes #27534.

Author: crisbeto

src/material/dialog/dialog-ref.ts

@@ -15,6 +15,7 @@ import {_MatDialogContainerBase} from './dialog-container';
 import {filter, take} from 'rxjs/operators';
 import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
 import {GlobalPositionStrategy} from '@angular/cdk/overlay';
+import {ComponentRef} from '@angular/core';
 
 export const enum MatDialogState {
   OPEN,
@@ -29,6 +30,12 @@ export class MatDialogRef<T, R = any> {
   /** The instance of component opened into the dialog. */
   componentInstance: T;
 
+  /**
+   * `ComponentRef` of the component opened into the dialog. Will be
+   * null when the dialog is opened using a `TemplateRef`.
+   */
+  readonly componentRef: ComponentRef<T> | null;
+
   /** Whether the user is allowed to close the dialog. */
   disableClose: boolean | undefined;
 

src/material/dialog/dialog.spec.ts

@@ -17,6 +17,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentFactoryResolver,
+  ComponentRef,
   createNgModuleRef,
   Directive,
   Inject,
@@ -110,6 +111,7 @@ describe('MDC-based MatDialog', () => {
 
     expect(overlayContainerElement.textContent).toContain('Pizza');
     expect(dialogRef.componentInstance instanceof PizzaMsg).toBe(true);
+    expect(dialogRef.componentRef instanceof ComponentRef).toBe(true);
     expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef);
 
     viewContainerFixture.detectChanges();

src/material/dialog/dialog.ts

@@ -10,6 +10,7 @@ import {ComponentType, Overlay, OverlayContainer, ScrollStrategy} from '@angular
 import {Location} from '@angular/common';
 import {
   ANIMATION_MODULE_TYPE,
+  ComponentRef,
   Inject,
   Injectable,
   InjectionToken,
@@ -197,6 +198,7 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
 
     // This can't be assigned in the `providers` callback, because
     // the instance hasn't been assigned to the CDK ref yet.
+    (dialogRef! as {componentRef: ComponentRef<T>}).componentRef = cdkRef.componentRef!;
     dialogRef!.componentInstance = cdkRef.componentInstance!;
 
     this.openDialogs.push(dialogRef!);

tools/public_api_guard/material/dialog.md

@@ -7,6 +7,7 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
 import { Direction } from '@angular/cdk/bidi';
@@ -250,6 +251,7 @@ export class MatDialogRef<T, R = any> {
     beforeClosed(): Observable<R | undefined>;
     close(dialogResult?: R): void;
     componentInstance: T;
+    readonly componentRef: ComponentRef<T> | null;
     // (undocumented)
     _containerInstance: _MatDialogContainerBase;
     disableClose: boolean | undefined;