CODEWITHSUNDEEP
angulardialogangular-material2
Matúš Zábojník
Matúš Zábojník

Reputation: 1222

Angular Material Dialog return value

I have a following dialog component (which I open using dialog.open(MyDialogComponent) in another component):

export class MyDialogComponent implements OnInit {
  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {}

  ngOnInit() {}
}

I know I can return any data to the calling component by executing matDialogRef.close(dataToReturn) bound to a button in dialog component. But how can I return the data if a user clicked elsewhere but the popup to close it?

Upvotes: 32

Views: 54140

Answers (4)

FBaez51
FBaez51

Reputation: 551

    //In dialog component.
    dataYouWantToReturn = true; //set data.
            
    this.dialogRef.close(dataYouWantToReturn); 
               
    //In component calling the dialog component.
    dialogRef.afterClosed().subscribe(result => {
        if (result) {
            console.log("Result is TRUE!");
        }
    });

You can also pass json objects such as below:

    //In dialog component.
    dataYouWantToReturn = {success: true, message: 'Result is TRUE!'}; //set data.
            
    this.dialogRef.close(dataYouWantToReturn); 
               
    //In component calling the dialog component.
    dialogRef.afterClosed().subscribe(result => {
        if (result.success) {
            console.log(result.message); //"Result is TRUE!"
        }
    });

Upvotes: 8

Eternal21
Eternal21

Reputation: 4664

Here's a solution that will return default value if no other value has been provided. Works with both backdrop and Esc clicks:

constructor(public dialogRef: MatDialogRef<DialogComponent>) {
    // return 'Cancel' when backdrop or 'Esc' clicked
    dialogRef.beforeClosed().subscribe(
       result => dialogRef.close(result ?? DialogResult.Cancel));
 }
    
  onYesClicked() {
    this.closeDialog(DialogResult.Yes);
  }

  onNoClicked() {
    this.closeDialog(DialogResult.No);
  }

  private closeDialog(result: DialogResult) {
    this.dialogRef.close(result);
  }

 export enum DialogResult {
   Cancel = -1,
   No = 0,
   Yes = 1,
 }

Upvotes: 1

A-Sharabiani
A-Sharabiani

Reputation: 19329

Call the close(dataToReturn) in the beforeClosed() to set the dialog result:

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {
    matDialogRef.beforeClosed().subscribe(() => matDialogRef.close(this.dataToReturn));
}

This will work if the dialog is closed by clicking on the backdrop, or pressing the ESC.

Upvotes: 23

Mat&#250;š Z&#225;bojn&#237;k
Mat&#250;š Z&#225;bojn&#237;k

Reputation: 1222

If anybody is interested I found a solution (not sure if it is the best one). Just disabling the default close operation so the popup does not close on backround click, while closing it with data param on background click.

matDialogRef.disableClose = true;//disable default close operation
matDialogRef.backdropClick().subscribe(result => {
  matDialogRef.close(dataToReturn);
});

This way the calling component receives the data whether the dialog was closed by button or clicked elsewhere.

Upvotes: 44

Related Questions