feat(material/bottom-sheet): expose rendered ComponentRef

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

Author: crisbeto

src/material/bottom-sheet/bottom-sheet-ref.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ComponentRef} from '@angular/core';
 import {DialogRef} from '@angular/cdk/dialog';
 import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
 import {merge, Observable, Subject} from 'rxjs';
@@ -22,6 +23,14 @@ export class MatBottomSheetRef<T = any, R = any> {
     return this._ref.componentInstance!;
   }
 
+  /**
+   * `ComponentRef` of the component opened into the bottom sheet. Will be
+   * null when the bottom sheet is opened using a `TemplateRef`.
+   */
+  get componentRef(): ComponentRef<T> | null {
+    return this._ref.componentRef;
+  }
+
   /**
    * Instance of the component into which the bottom sheet content is projected.
    * @docs-private

src/material/bottom-sheet/bottom-sheet.spec.ts

@@ -8,6 +8,7 @@ import {Location} from '@angular/common';
 import {SpyLocation} from '@angular/common/testing';
 import {
   Component,
+  ComponentRef,
   Directive,
   Inject,
   Injector,
@@ -83,6 +84,7 @@ describe('MatBottomSheet', () => {
 
     expect(overlayContainerElement.textContent).toContain('Pizza');
     expect(bottomSheetRef.instance instanceof PizzaMsg).toBe(true);
+    expect(bottomSheetRef.componentRef instanceof ComponentRef).toBe(true);
     expect(bottomSheetRef.instance.bottomSheetRef).toBe(bottomSheetRef);
   });
 

tools/public_api_guard/material/bottom-sheet.md

@@ -9,6 +9,7 @@ import { AnimationTriggerMetadata } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ChangeDetectorRef } from '@angular/core';
+import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { DialogConfig } from '@angular/cdk/dialog';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -117,6 +118,7 @@ export class MatBottomSheetRef<T = any, R = any> {
     afterDismissed(): Observable<R | undefined>;
     afterOpened(): Observable<void>;
     backdropClick(): Observable<MouseEvent>;
+    get componentRef(): ComponentRef<T> | null;
     containerInstance: MatBottomSheetContainer;
     disableClose: boolean | undefined;
     dismiss(result?: R): void;