Implementing angular material dialog box with candeactive

Question

problem faced when implement angular 4 material dialog box in candeactive

Whenever i navigate from one page to another if any changes in form field, i need to indicate "There is unsaved data.Do you want to close". This should come up with confirmation window with OK and cancel button.

On click of OK, it should navigate to other page else it must be in same page. I have tried with candeactive, it is perfectly working when I use window.confirm

 return window.confirm('There is unsaved data.Do you want to close?').

But My requirement is to implement the confirm window using Angular material dialog box. https://material.angular.io/components/dialog/overview

The problem is before retrieved the result from afterClosd. it returned false.So whenever i clicks OK or Cancel in dialog box, it didn't move to another screen.

openDialog(): boolean {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '500px'

    });

    dialogRef.afterClosed().subscribe(result => {           
      if (result){
         return true;
      }else{
        return false;
      } 
    });
   return false;

  }

Unknown Unknown · Accepted Answer · 2018-01-22T08:49:37

I assume you didn't see this part in the documentation ?

<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true">Leave</button>

Also, you should remove your last return false statement :

dialogRef.afterClosed().subscribe(result => {           
  if (result){
     return true;
  }else{
    return false;
  } 
});
// return false;

The modal is asynchronous as you can see with subscribe : this means that you are waiting for an user intercation before returning something.

In your case, you return false before the user action.

Implementing angular material dialog box with candeactive

1 Answers