Return Observable in canDeactivate not working

Question

I have a confirm/cancel modal dialog that pops up when a user leaves a route. I do this by using a guard with the canDeactivate method. However I want canDeactivate to wait

Answer 1

Just putting this here in case someone in future is as careless as me:

If your component has a function hasUnsavedChanges() your canDeactivate() method would need to return !hasUnsavedChanges().

But then if you start using an observable for hasUnsavedChanges, you'll be returning !hasUnsavedChanges$ which will just be a falsey value.

If you need to support both you can do this:

canDeactivate(component: C)
{
    var hasUnsavedChanges = component.hasUnsavedChanges();

    if (typeof (hasUnsavedChanges) === 'boolean')
    {
        return !hasUnsavedChanges;
    }
    else
    {
        return hasUnsavedChanges.map(x => !x);
    }
}