In this article, we will learn how to close an Angular Material Dialog by clicking outside of the dialog. Angular Material is a UI component library for Angular applications that provides a set of reusable and accessible UI components.
By default, when we open an Angular Material Dialog, it can only be closed by clicking on the close button or by pressing the escape key. However, sometimes we may want to close the dialog by clicking outside of it. Let's see how we can achieve this.
Step 1: Install Angular Material
The first step is to install Angular Material in your Angular project. Open your project in the terminal and run the following command:
ng add @angular/material
This command will install Angular Material and its dependencies in your project.
Step 2: Import the MatDialogRef
In order to close the dialog from outside, we need to import the MatDialogRef class from the @angular/material/dialog package. Open the component file where you have defined the dialog and import the MatDialogRef class as shown below:
import { MatDialogRef } from '@angular/material/dialog';
Step 3: Inject the MatDialogRef
Next, we need to inject the MatDialogRef into the constructor of the component where we want to close the dialog. Here is an example:
constructor(private dialogRef: MatDialogRef<YourComponentName>) { }
Make sure to replace YourComponentName with the actual name of your component.
Step 4: Add the HostListener
Now, let's add a HostListener to the component. The HostListener decorator allows us to listen to events on the host element, which in this case is the entire document. Add the following code inside your component class:
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
const targetElement = event.target as HTMLElement;
if (!this.dialogRef.componentInstance.dialogConfig.disableClose && !this.dialogRef.nativeElement.contains(targetElement)) {
this.dialogRef.close();
}
}
This code listens for a click event on the document. If the click event occurs outside of the dialog and the dialog's disableClose property is not set to true, the dialog will be closed using the dialogRef.close() method.
Step 5: Disable Close Property
If you want to disable the ability to close the dialog by clicking outside of it, you can set the disableClose property of the dialog configuration to true. Here is an example:
const dialogRef = this.dialog.open(YourComponentName, {
disableClose: true
});
Replace YourComponentName with the actual name of your component.
That's it! Now you can close an Angular Material Dialog by clicking outside of it. This provides a more intuitive and user-friendly experience for your application's users.
In this article, we learned how to close an Angular Material Dialog by clicking outside of the dialog. We installed Angular Material, imported the MatDialogRef class, injected it into the component, added a HostListener to listen for click events on the document, and closed the dialog when the click event occurred outside of the dialog. We also learned how to disable the ability to close the dialog by clicking outside of it. By following these steps, you can enhance the user experience of your Angular application.
References
| Source | Link |
|---|---|
| Angular Material | https://material.angular.io/ |
| Angular Documentation | https://angular.io/docs |