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

Author: PowerKiKi

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;
 

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);
 }

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>;
 
   /**