Fixing this.dialogRef.close is not a function Error in Angular 19 Dialogs

Learn how to resolve the common Angular 19 error where calling this.dialogRef.close() in a Material dialog component results in 'close is not a function'. A concise guide to proper dependency injection and dialog closing.
---
This video is based on the question https://stackoverflow.com/q/79404902/ asked by the user 'Fallingstar Warrior' ( https://stackoverflow.com/u/29457736/ ) and on the answer https://stackoverflow.com/a/79405201/ provided by the user 'iams0nus' ( https://stackoverflow.com/u/7061557/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: this.dialogRef.close is not a function Angular 19

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Understanding the Problem

When working with Angular Material dialogs in Angular 19, a common error encountered is:

[[See Video to Reveal this Text or Code Snippet]]

This typically happens when attempting to close a dialog using the MatDialogRef instance inside the dialog component.



Why Does This Error Occur?

This error often arises because the MatDialogRef is being overridden incorrectly in the component's providers array:

[[See Video to Reveal this Text or Code Snippet]]

Here, MatDialogRef is provided with an empty object {}, which does not have the close() method. Consequently, when you call this.dialogRef.close(), it throws an error because close is undefined.



Correct Approach: Use Constructor Injection Only

Angular Material dialogs provide MatDialogRef and dialog data via dependency injection automatically when you open the dialog using MatDialog.open().

Remove the manual provider override from the component:

[[See Video to Reveal this Text or Code Snippet]]

Inject MatDialogRef and MAT_DIALOG_DATA in the constructor directly:

[[See Video to Reveal this Text or Code Snippet]]



Summary

Do not manually provide MatDialogRef in the component providers. Let Angular inject it.

Inject MatDialogRef and MAT_DIALOG_DATA via constructor parameters.

Use this.dialogRef.close() to close the dialog safely.

This approach ensures the close() method is available and your dialog closes as expected.



By following this best practice, you avoid overriding crucial Angular Material dialog internals and prevent runtime errors.