angular material dialog box

Question

I am using angular material dialog box. currently its open. but i do not know how it close using dialog box close button. i tried several times, but could not do it. please check below code (part of code)

      constructor(private summaryService: SummaryService,public dialog: MatDialog) { }
  openDialog(): void {
    const dialogRef = this.dialog.open(ConfirmationDialog, {
    });


  }

  closeDialog(){
    alert("test");
    this.dialog.close();
  }

openDialog() is working well. i have two problems in the colseDialog() function. when i alert some text, error " _co.closeDialog is not a function". other error display in my IDE "Property 'close' does not exist on type 'MatDialog'". can u give solution to close popup

Answer 1

Try making dialogRef global variable in main.component.ts

dialogRef : MatDialogRef<ConfirmationDialog>

constructor(private summaryService: SummaryService,public dialog: MatDialog) { }

openDialog(): void {
   dialogRef = this.dialog.open(ConfirmationDialog, {
   });
}

closeDialog(){
   alert("test");
   this.dialogRef.close();
}

Try following changes in your confirmationDialog.component.ts

constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ESignatureComponent>,
 ) { }

onCloseClick(){
  this.dialogRef.close();
}

Answer 2

You can try something like this, you have to listen to the close event in the method where you declared your dialogRef object, otherwise it will be undefined.

openDialog(): void {
   const dialogRef = this.dialog.open(ConfirmationDialog);
   dialogRef.afterClosed().subscribe(result => {
      if(result) {
        //Means user clicked on OK button
      }
    });
}

Answer 3

You can use afterOpened event to get modal Window globally.

export class AppComponent implements OnInit, OnDestroy {
  dialogRef: MatDialog;

  constructor(@Inject(DOCUMENT) private _document: Document, public store: Store, dialog: MatDialog) {
    this.dialogRef = dialog;
    this.dialogRef.afterOpened.subscribe(value => {
      console.log("Some Modal Window Opened");
    })
  }