CODEWITHSUNDEEP
angularangular-material2
Lahiru Chandima
Lahiru Chandima

Reputation: 24068

Angular2 material dialog self close

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?

Upvotes: 76

Views: 73226

Answers (3)

Dejazmach
Dejazmach

Reputation: 800

As stated in the accepted answer

this.dialogRef.close();

closes the dialog. But most of the time we want the response from server to be rendered immediately without refreshing the page. To do that, we pass the response as an arugument to the close method as shown below

this.dialogRef.close(response);

If you do this, you don't need to do the event emmiter approach found in the docs which is

<button mat-button [mat-dialog-close]="response" cdkFocusInitial>Add</button>

since it closes the dialog before the asynchronous operation finishes.

Upvotes: 3

Ploppy
Ploppy

Reputation: 15343

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();

Upvotes: 160

ibou laye
ibou laye

Reputation: 19

This following works fine for me

this.matDialog.closeAll();

Upvotes: 0

Related Questions