Dialog with CanDeactive Guard

[Felix]

Hello!
I want to implement your dialog with a the CanDeactive Guard. In order to so I have implemented the CanDeactive Guard

 

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuard
  implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate && component.canDeactivate();
  }
}

 

and extended my component and created the following function

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
  const dialog: DialogRef = this.dialogService.open({
    title: 'Please confirm',
    content: 'Are you sure?',
    actions: [{ text: 'No' }, { text: 'Yes', primary: true }],
    width: 450,
    height: 200,
    minWidth: 250,
  });
  if (this.isInEditState) {
    dialog.result.subscribe((result: any) => {
      if (result.text === 'No') {
        return false;
      } else {
        return true;
      }
    });
  } else {
    return true;
  }
}

 

I get a dialog, but the result will not trigger the CanDeactive Guard (I think it is undefinied). I think he looses the scope because of the subscribe. Could you guys help me?

 

Best regards

Felix 

[Svet]

Hi Felix,

Thank you for the provided details.

As far as I understand the requirement is to control the router navigation based on the selected value of a Dialog. If that is the case I can suggest two scenarios.

The first option is to return an observable from the CanActivate/Deactivate guards as opposed to primitive boolean values:

https://angular.io/api/router/CanActivate

https://angular.io/api/router/CanDeactivate

https://stackoverflow.com/questions/37948068/angular-2-routing-canactivate-work-with-observable

You can return the Observable that the Dialog "result" represents, potentially mapped so that the action result is mapped to a boolean value, e.g.:

https://stackblitz.com/edit/angular-c72ki2-9axhov?file=app/app.component.ts

You might need to negate the booleans from the example above depending on the scenario and what boolean value the Deactivate guard will need to allow/disallow leaving the page.

The second option is to subscribe to the result of the Dialog and depending on it to programmatically navigate to another page or not.

I hope the suggestions help. Please let me know in case I can provide any further information on this case or if I didn't understand the requirement properly.

Regards,
Svetlin
Progress Telerik

[Felix]

Hello Svetlin,

thanks for your reply. The stackblitz url helped me through my problem.

I had to adjust a little with custom appsettings to get it working, but giving back the Observable<boolean> did the trick.

Thanks for that!

Best regards

Felix