feat(cdk/dialog): expose rendered ComponentRef

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

Author: crisbeto

src/cdk/dialog/dialog-ref.ts

@@ -12,6 +12,7 @@ import {Observable, Subject, Subscription} from 'rxjs';
 import {DialogConfig} from './dialog-config';
 import {FocusOrigin} from '@angular/cdk/a11y';
 import {BasePortalOutlet} from '@angular/cdk/portal';
+import {ComponentRef} from '@angular/core';
 
 /** Additional options that can be passed in when closing a dialog. */
 export interface DialogCloseOptions {
@@ -29,6 +30,12 @@ export class DialogRef<R = unknown, C = unknown> {
    */
   readonly componentInstance: C | null;
 
+  /**
+   * `ComponentRef` of the component opened into the dialog. Will be
+   * null when the dialog is opened using a `TemplateRef`.
+   */
+  readonly componentRef: ComponentRef<C> | null;
+
   /** Instance of the container that is rendering out the dialog content. */
   readonly containerInstance: BasePortalOutlet & {_closeInteractionType?: FocusOrigin};
 

src/cdk/dialog/dialog.spec.ts

@@ -9,6 +9,7 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
+  ComponentRef,
   Directive,
   inject,
   Inject,
@@ -89,6 +90,7 @@ describe('Dialog', () => {
 
     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/cdk/dialog/dialog.ts

@@ -16,6 +16,7 @@ import {
   Inject,
   Optional,
   SkipSelf,
+  ComponentRef,
 } from '@angular/core';
 import {BasePortalOutlet, ComponentPortal, TemplatePortal} from '@angular/cdk/portal';
 import {of as observableOf, Observable, Subject, defer} from 'rxjs';
@@ -290,6 +291,7 @@ export class Dialog implements OnDestroy {
           config.componentFactoryResolver,
         ),
       );
+      (dialogRef as {componentRef: ComponentRef<C>}).componentRef = contentRef;
       (dialogRef as {componentInstance: C}).componentInstance = contentRef.instance;
     }
   }

tools/public_api_guard/cdk/dialog.md

@@ -175,6 +175,7 @@ export class DialogRef<R = unknown, C = unknown> {
     close(result?: R, options?: DialogCloseOptions): void;
     readonly closed: Observable<R | undefined>;
     readonly componentInstance: C | null;
+    readonly componentRef: ComponentRef<C> | null;
     // (undocumented)
     readonly config: DialogConfig<any, DialogRef<R, C>, BasePortalOutlet>;
     readonly containerInstance: BasePortalOutlet & {