Диалог Kendo для подтверждения при навигации из углового компонента с помощью canDeactivate

Question

Я создал службу canDeactivate, как показано ниже.

@Injectable()
export class UnsavedChangesGuardService implements CanDeactivate<MyComponent> {
canDeactivate(component: CanComponentDeactivate, currentRoute: ActivatedRouteSnapshot, 
currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) {
    if (component.canDeactivate) {
        return (() => component.canDeactivate())();
        //return component.canDeactivate();
        //return confirm('You have unsaved changes! If you leave, your changes will be lost.')
        //return false;
    } else {
        return true;
    }
  }
}

Подтверждение браузера по умолчанию работает должным образом (подтверждение появляется, как только пользователь пытается перейти). Но диалог кендо не появляется сразу, хотя навигация не происходит, пользователь должен выполнить какое-то другое действие на странице, чтобы появилось окно кендо. ниже код компонента.

<kendo-dialog title="Please confirm" *ngIf="showDialog">
     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>
<div><input /></div>

export class myComponent{
     showDialog: boolean;
     canDeactivate() {
        this.showDialog = true;
        return false;
     }
 }

Может ли кто-нибудь помочь мне выяснить, почему пользователь должен выполнить какое-либо действие на странице после выполнения canDeactivate, чтобы увидеть диалоговое окно кендо. заранее спасибо