Disable click outside of angular material dialog area to close the dialog With Angular Version 4 0

Question

I am currently working on password reset page of an Angular 4 project. We are using Angular Material to create the dialog, however, when the client clicks out of the dialog, it will close automatically. Is there a way to avoid the dialog close until our code side call "close" function? Or how should I create an unclosable modal?

This question is related to angular dialog modal-dialog angular-material

User · Answer

How about playing with these two properties?

disableClose: boolean - Whether the user can use escape or clicking on the backdrop to close the modal.

hasBackdrop: boolean - Whether the dialog has a backdrop.

https://material.angular.io/components/dialog/api

User · Answer

There are two ways to do it    In the method that opens the dialog  pass in the following configuration option disableClose as the second parameter in MatDialog open   and set it to true   export class AppComponent     constructor private dialog  MatDialog      openDialog         this dialog open DialogComponent    disableClose  true            Alternatively  do it in the dialog component itself   export class DialogComponent     constructor private dialogRef  MatDialogRef lt DialogComponent gt        dialogRef disableClose   true           Here s what you re looking for     And here s a Stackblitz demo    Other use cases  Here s some other use cases and code snippets of how to implement them   Allow esc to close the dialog but disallow clicking on the backdrop to close the dialog  As what  MarcBrazeau said in the comment below my answer  you can allow the esc key to close the modal but still disallow clicking outside the modal  Use this code on your dialog component   import   Component  OnInit  HostListener   from   angular core   import   MatDialogRef   from   angular material    Component     selector   app-third-dialog     templateUrl     third-dialog component html     export class ThirdDialogComponent     constructor private dialogRef  MatDialogRef lt ThirdDialogComponent gt                HostListener  window keyup esc   onKeyUp         this dialogRef close               Prevent esc from closing the dialog but allow clicking on the backdrop to close     P S  This is an answer which originated from this answer  where the demo was based on this answer    To prevent the esc key from closing the dialog but allow clicking on the backdrop to close  I ve adapted Marc s answer  as well as using MatDialogRef backdropClick to listen for click events to the backdrop   Initially  the dialog will have the configuration option disableClose set as true  This ensures that the esc keypress  as well as clicking on the backdrop will not cause the dialog to close   Afterwards  subscribe to the MatDialogRef backdropClick method  which emits when the backdrop gets clicked and returns as a MouseEvent    Anyways  enough technical talk  Here s the code   openDialog       let dialogRef   this dialog open DialogComponent    disableClose  true               Subscribe to events emitted when the backdrop is clicked      NOTE  Since we won t actually be using the  MouseEvent  event  we ll just use an underscore here      See https   stackoverflow com a 41086381 for more info        dialogRef backdropClick   subscribe      gt           Close the dialog     dialogRef close                       Alternatively  this can be done in the dialog component   export class DialogComponent     constructor private dialogRef  MatDialogRef lt DialogComponent gt         dialogRef disableClose   true               Subscribe to events emitted when the backdrop is clicked       NOTE  Since we won t actually be using the  MouseEvent  event  we ll just use an underscore here       See https   stackoverflow com a 41086381 for more info            dialogRef backdropClick   subscribe      gt             Close the dialog       dialogRef close

User · Answer

Add  config   quot  backdrop   static   quot   to the model code

[angular] Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

The answer is

Examples related to angular

Examples related to dialog

Examples related to angular-material

Tags