angular / angular/components

bug(dialog): Typing of new `MatDialogConfig.closePredicate`

Open
#31,873 2 comments 0 reactions 0 assignees View on GitHub
area: material/dialog P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

#30919 introduced the new MatDialog config `closePredicate`. I am struggling to make typing work to have a 100% typed code.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/9wtzaa17?file=src%2Fmain.ts

Steps to reproduce:
1. open link, it does not compile, but I expect to compile

### Expected Behavior

At first I expected that types would be flowing, so that I wouldn't need to repeat them. So my expected usage would be like:

```ts
this.dialog.open(
MyDialog,
{
closePredicate: (
result,
config,
componentInstance
) => {
return something();
},
}
);
```

But that failed to compile. So I tried to add typing like so:

```ts
this.dialog.open(
MyDialog,
{
closePredicate: (
result: MyDialogResult | undefined,
config: MatDialogConfig,
componentInstance: MyDialog | null
) => {
return componentInstance?.animal() !== 'my original data';
},
}
);
```

That also fail to compile. And I am out of ideas.

Angular Material source never use this callback with any parameters (neither in implementation, nor in tests).

What is the expected usage pattern here ? Is there a way to avoid repetition ?

### Actual Behavior

Stackblitz does not compile

### Environment

- Angular: 20.1
- CDK/Material: 20.1
- Browser(s): Chrome
- TypeScript: 5.8.3

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the TypeScript typings for MatDialogConfig.closePredicate and dialog.open. Compare inferred and explicitly annotated callback parameters against the expected usage; done means the reproduction compiles with correctly typed result, config, and componentInstance values.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.