Angular2 material dialog self close

Lahiru Chandima picture Lahiru Chandima · Jun 24, 2017 · Viewed 28k times · Source

I used angular2 material MdDialog to show a form.

When user submits the form, a request is sent to the backend and if the request is successful, I need to close the dialog. If backend request failed, I need to keep the dialog open.

I can close the dialog by using a button like below.

<button md-raised-button md-dialog-close>Cancel</button>

But, in this case, I only need to close the dialog only if the backend request is successful, so I need a way to programmatically close the dialog.

The component which is shown inside the dialog doesn't have the dialog ref, and I don't know any other way to self close the dialog from the component.

Is there any way I an close the dialog from within the component inside the dialog?

Answer

Ploppy picture Ploppy · Jun 24, 2017

If you wanna close it from the dialog:

constructor(private dialogRef: MatDialogRef<MyDialogComponent>){ }

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

If you wanna close it from the parent of the dialog:

constructor(private matDialog: MatDialog){}

//anywhere
let dialogRef = this.matDialog.open(MyDialogComponent);
dialogRef.close();