This is a migrated thread and some comments may be shown as answers.

Dialog with CanDeactive Guard

2 Answers 3 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Felix
Top achievements
Rank 1
Felix asked on 06 Apr 2021, 10:20 AM

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 

2 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 08 Apr 2021, 09:19 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Felix
Top achievements
Rank 1
answered on 09 Apr 2021, 12:41 PM

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

Tags
Dialog
Asked by
Felix
Top achievements
Rank 1
Answers by
Svet
Telerik team
Felix
Top achievements
Rank 1
Share this question
or