Add bindings support to dialog-based components

goldens/cdk/dialog/index.api.md

@@ -120,6 +120,7 @@ export class DialogConfig<D = unknown, R = unknown, C extends DialogContainer =
     ariaModal?: boolean;
     autoFocus?: AutoFocusTarget | string | boolean;
     backdropClass?: string | string[];
+    bindings?: Binding[];
     closeOnDestroy?: boolean;
     closeOnNavigation?: boolean;
     closeOnOverlayDetachments?: boolean;

goldens/material/bottom-sheet/index.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 
+import { Binding } from '@angular/core';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
@@ -53,6 +54,7 @@ export class MatBottomSheetConfig<D = any> {
     ariaModal?: boolean;
     autoFocus?: AutoFocusTarget | string | boolean;
     backdropClass?: string;
+    bindings?: Binding[];
     closeOnNavigation?: boolean;
     data?: D | null;
     direction?: Direction;

goldens/material/dialog/index.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 
+import { Binding } from '@angular/core';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
@@ -125,6 +126,7 @@ export class MatDialogConfig<D = any> {
     ariaModal?: boolean;
     autoFocus?: AutoFocusTarget | string | boolean;
     backdropClass?: string | string[];
+    bindings?: Binding[];
     closeOnNavigation?: boolean;
     closePredicate?: <Result = unknown, Component = unknown, Config extends DialogConfig = MatDialogConfig>(result: Result | undefined, config: Config, componentInstance: Component | null) => boolean;
     data?: D | null;

goldens/material/dialog/testing/index.api.md

@@ -6,6 +6,7 @@
 
 import * as _angular_cdk_testing from '@angular/cdk/testing';
 import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { Binding } from '@angular/core';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
 import { ComponentPortal } from '@angular/cdk/portal';

src/cdk/dialog/dialog-config.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ViewContainerRef, Injector, StaticProvider, Type} from '@angular/core';
+import {ViewContainerRef, Injector, StaticProvider, Type, Binding} from '@angular/core';
 import {Direction} from '../bidi';
 import {PositionStrategy, ScrollStrategy} from '../overlay';
 import {Observable} from 'rxjs';
@@ -191,4 +191,10 @@ export class DialogConfig<D = unknown, R = unknown, C extends DialogContainer =
    * A function can be passed in to resolve the context lazily.
    */
   templateContext?: Record<string, any> | (() => Record<string, any>);
+
+  /**
+   * Bindings to apply to the component rendered inside the dialog.
+   * Does nothing for template-based dialogs.
+   */
+  bindings?: Binding[];
 }

src/cdk/dialog/dialog.spec.ts

@@ -17,11 +17,13 @@ import {
   Directive,
   InjectionToken,
   Injector,
+  Input,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
   inject,
+  inputBinding,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -606,6 +608,15 @@ describe('Dialog', () => {
         expect(dialogRef.componentInstance!.data).toBeNull();
       }).not.toThrow();
     });
+
+    it('should be able to apply bindings', () => {
+      const dialogRef = dialog.open(PizzaMsg, {
+        bindings: [inputBinding('flavor', () => 'pepperoni')],
+      });
+      viewContainerFixture.detectChanges();
+
+      expect(dialogRef.componentInstance!.flavor).toBe('pepperoni');
+    });
   });
 
   it('should not keep a reference to the component after the dialog is closed', () => {
@@ -1364,6 +1375,7 @@ class ComponentWithTemplateRef {
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class PizzaMsg {
+  @Input() flavor = 'unknown';
   dialogRef = inject<DialogRef<PizzaMsg>>(DialogRef);
   dialogInjector = inject(Injector);
   directionality = inject(Directionality);

src/cdk/dialog/dialog.ts

@@ -302,7 +302,13 @@ export class Dialog implements OnDestroy {
     } else {
       const injector = this._createInjector(config, dialogRef, dialogContainer, this._injector);
       const contentRef = dialogContainer.attachComponentPortal<C>(
-        new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector),
+        new ComponentPortal(
+          componentOrTemplateRef,
+          config.viewContainerRef,
+          injector,
+          null,
+          config.bindings,
+        ),
       );
       (dialogRef as {componentRef: ComponentRef<C>}).componentRef = contentRef;
       (dialogRef as {componentInstance: C}).componentInstance = contentRef.instance;

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {InjectionToken, Injector, ViewContainerRef} from '@angular/core';
+import {Binding, InjectionToken, Injector, ViewContainerRef} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ScrollStrategy} from '@angular/cdk/overlay';
 import {RestoreFocusValue} from '@angular/cdk/dialog';
@@ -86,4 +86,10 @@ export class MatBottomSheetConfig<D = any> {
 
   /** Maximum height for the bottom sheet. If a number is provided, assumes pixel units. */
   maxHeight?: number | string;
+
+  /**
+   * Bindings to apply to the component rendered inside the dialog.
+   * Does nothing for template-based dialogs.
+   */
+  bindings?: Binding[];
 }

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

@@ -17,13 +17,15 @@ import {
   Directive,
   Injectable,
   Injector,
+  Input,
   NgModule,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
   forwardRef,
   inject,
+  inputBinding,
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -506,6 +508,15 @@ describe('MatBottomSheet', () => {
         expect(bottomSheetRef.instance.data).toBeNull();
       }).not.toThrow();
     });
+
+    it('should be able to apply bindings', () => {
+      const bottomSheetRef = bottomSheet.open(PizzaMsg, {
+        bindings: [inputBinding('flavor', () => 'pepperoni')],
+      });
+      viewContainerFixture.detectChanges();
+
+      expect(bottomSheetRef.instance.flavor).toBe('pepperoni');
+    });
   });
 
   describe('disableClose option', () => {
@@ -1055,6 +1066,7 @@ class ComponentWithTemplateRef {
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class PizzaMsg {
+  @Input() flavor = 'unknown';
   bottomSheetRef = inject<MatBottomSheetRef<PizzaMsg>>(MatBottomSheetRef);
   injector = inject(Injector);
   directionality = inject(Directionality);

src/material/dialog/dialog-config.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ViewContainerRef, Injector} from '@angular/core';
+import {ViewContainerRef, Injector, Binding} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ScrollStrategy} from '@angular/cdk/overlay';
 import {DialogConfig, RestoreFocusValue} from '@angular/cdk/dialog';
@@ -159,5 +159,9 @@ export class MatDialogConfig<D = any> {
    */
   exitAnimationDuration?: string | number;
 
-  // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
+  /**
+   * Bindings to apply to the component rendered inside the dialog.
+   * Does nothing for template-based dialogs.
+   */
+  bindings?: Binding[];
 }

src/material/dialog/dialog.spec.ts

@@ -20,6 +20,7 @@ import {
   Directive,
   Injectable,
   Injector,
+  Input,
   NgModule,
   TemplateRef,
   ViewChild,
@@ -28,6 +29,7 @@ import {
   forwardRef,
   signal,
   inject,
+  inputBinding,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -736,6 +738,15 @@ describe('MatDialog', () => {
         expect(dialogRef.componentInstance.data).toBeNull();
       }).not.toThrow();
     });
+
+    it('should be able to apply bindings', () => {
+      const dialogRef = dialog.open(PizzaMsg, {
+        bindings: [inputBinding('flavor', () => 'pepperoni')],
+      });
+      viewContainerFixture.detectChanges();
+
+      expect(dialogRef.componentInstance!.flavor).toBe('pepperoni');
+    });
   });
 
   it('should not keep a reference to the component after the dialog is closed', async () => {
@@ -2340,6 +2351,7 @@ class ComponentWithTemplateRef {
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class PizzaMsg {
+  @Input() flavor = 'unknown';
   dialogRef = inject<MatDialogRef<PizzaMsg>>(MatDialogRef);
   dialogInjector = inject(Injector);
   directionality = inject(Directionality);