From 879507a615dea799cc5e0b6c4aa149ef290f9a2f Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Thu, 18 Sep 2025 13:56:26 +0900
Subject: [PATCH] feat(material/dialog): Let types flow to
 `MatDialogConfig.closePredicate()` WIP

The goal is to be able to use `MatDialogConfig.closePredicate()` with
proper typing without repeating them, or without any casting.

This is a work in progress, because even though the modified test would
compile, and most likely pass, other places in the codebase are broken
by the breaking change introduced in `MatDialogConfig`. So I would like
to ask the opinion of the Angular team here. Is there any chance to have
something similar merged, if it gets polished up ?

Fixes #31873
---
 src/material/dialog/dialog-config.ts | 10 +++-------
 src/material/dialog/dialog.spec.ts   | 21 ++++++++++++++++++---
 src/material/dialog/dialog.ts        |  2 +-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts
index 0cfb0ae86234..b02aa286b54d 100644
--- a/src/material/dialog/dialog-config.ts
+++ b/src/material/dialog/dialog-config.ts
@@ -35,7 +35,7 @@ export interface DialogPosition {
 /**
  * Configuration for opening a modal dialog with the MatDialog service.
  */
-export class MatDialogConfig<D = any> {
+export class MatDialogConfig<D = any, Component = unknown, Result = any> {
   /**
    * Where the attached component should live in Angular's *logical* component tree.
    * This affects what is available for injection and the change detection order for the
@@ -69,13 +69,9 @@ export class MatDialogConfig<D = any> {
   disableClose?: boolean = false;
 
   /** Function used to determine whether the dialog is allowed to close. */
-  closePredicate?: <
-    Result = unknown,
-    Component = unknown,
-    Config extends DialogConfig = MatDialogConfig,
-  >(
+  closePredicate?: (
     result: Result | undefined,
-    config: Config,
+    config: this,
     componentInstance: Component | null,
   ) => boolean;
 
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index d68cc19fe351..d54bd47a7b63 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1017,8 +1017,15 @@ describe('MatDialog', () => {
     it('should determine whether closing via the backdrop is allowed', fakeAsync(() => {
       let canClose = false;
       const closedSpy = jasmine.createSpy('closed spy');
-      const ref = dialog.open(PizzaMsg, {
-        closePredicate: () => canClose,
+      const ref = dialog.open<PizzaMsg, PizzaData, PizzaResult>(PizzaMsg, {
+        data: {myData: 'my data'},
+        closePredicate: (result, config, componentInstance) => {
+            expect(result?.myResult).toBe('');
+            expect(config.data).toBe({myData: 'my data'});
+            expect(componentInstance?.dialogRef).toBeInstanceOf(MatDialogRef);
+
+            return canClose;
+        },
         viewContainerRef: testViewContainerRef,
       });
 
@@ -2302,12 +2309,20 @@ class ComponentWithTemplateRef {
   }
 }
 
+type PizzaData = {
+    myData?: string;
+}
+
+type PizzaResult = {
+    myResult: string;
+}
+
 /** Simple component for testing ComponentPortal. */
 @Component({
   template: '<p>Pizza</p> <input> <button>Close</button>',
 })
 class PizzaMsg {
-  dialogRef = inject<MatDialogRef<PizzaMsg>>(MatDialogRef);
+  dialogRef = inject<MatDialogRef<PizzaMsg, PizzaResult>>(MatDialogRef);
   dialogInjector = inject(Injector);
   directionality = inject(Directionality);
 }
diff --git a/src/material/dialog/dialog.ts b/src/material/dialog/dialog.ts
index 1452db39b75e..fee9c055612c 100644
--- a/src/material/dialog/dialog.ts
+++ b/src/material/dialog/dialog.ts
@@ -114,7 +114,7 @@ export class MatDialog implements OnDestroy {
    */
   open<T, D = any, R = any>(
     component: ComponentType<T>,
-    config?: MatDialogConfig<D>,
+    config?: MatDialogConfig<D, T, R>,
   ): MatDialogRef<T, R>;
 
   /**