How to show modal confirmation in CanDeactivate in Angular2 application?

Question

I have an Angular2 application. One of its components implements CanDeactivate interface to confirm user's navigation away from the page. Here is the implementation of the route guard:

export class DeactivateGuard implements CanDeactivate<MyComponent> {
  canDeactivate(component: MyComponent) {
  let can = component.canDeactivate();
  return can;
  }
}

And here is the components's code:

canDeactivate() {
if (confirm("Are you sure you want to navigate away?")) {      
  return true;
}
else {
  return false;
}
}

Now, I want to show a custom modal window instead of browser's confirmation box. I have built such window with Telerik's Kendo UI:

<kendo-dialog title="Please confirm" *ngIf="userConfirm">
    Are you sure you want to navigate away?
    <kendo-dialog-actions>
        <button kendoButton class="k-button" (click)="closeConfirm('no')">No</button>
        <button kendoButton class="k-button" (click)="closeConfirm('yes')" primary="true">Yes</button>
    </kendo-dialog-actions>
</kendo-dialog>

This modal window works if I set userConfirm = true anywhere in code, except for in canDeactivate() method.

canDeactivate() {
this.userConfirm = true; //Does not work. The modal does not show up.
}

How can I use this modal window to get user's input?

Thank you.

userConfirm IS a global variable. I can confirm that the modal window works. I can activate it from other places in code, but not in canDeactivate() — myroslav, Aug 25 '17 at 21:13
here is my solution to a similar problem: https://stackoverflow.com/questions/46433195/angular-use-modal-dialog-in-candeactivate-guard-service-for-unsubmitted-changes — Francesco Borzi, Sep 27 '17 at 15:01

score 1 · Answer 1 · answered Aug 25 '17 at 22:15

1

I think you are losing the scope when executing component.canDeactivate(); from your auth guard. Try this instead:

export class DeactivateGuard implements CanDeactivate<MyComponent> {
  canDeactivate(component: MyComponent) {
    return (() => component.canDeactivate())();
  }
}

answered Aug 25 '17 at 22:15

Daniel Kucal

8,684
6
39
64

Thank you Daniel, that did the trick. I can now see the modal window popup. However, if I click any button on it now, I get the error: cannot read property 'closeRow' of undefined. I think Angular shows the modal and looses the scope. I need to somehow keep the scope current and get the result of the user input and then submit that result to . Any ideas? – myroslav Aug 25 '17 at 22:34
Where is the `closeRow` property defined and used? I can't see it anywhere here. I'd love to have a plunker, so I could test it by myself... – Daniel Kucal Aug 25 '17 at 22:43

score 0 · Answer 2 · answered Aug 25 '17 at 22:09

0

I am not sure how Kendo works, but when just using confirm() you would return the function in your canDeactivate() function like so:

canDeactivate() {
  return confirm("Are you sure you want to navigate away?");
}

You can read more about canDeactivate() here.

answered Aug 25 '17 at 22:09

dockleryxk

407
2
11

That already works, but I want something more styled and cusomized than the plain confirm dialog. – devC Oct 02 '20 at 11:08

How to show modal confirmation in CanDeactivate in Angular2 application?

2 Answers2