Angular2 CanDeactivate with async observable

Question

I am looking into Guards and trying to prevent the navigation from happening with CanDeactivate. I want to show a simple modal with Save/Cancel, save = navigate and well, cancel = cancel.

I've got CanDeactivate working, but it seems that its not resolved at the right time

Guard.ts

canDeactivate(component: PortfolioModelComponent) {
    component.saveChanges(); // Opens modal
    return component.modalResponse.take(1); // isnt happening at the right time
}

Component.ts

 public modalResponse: Observable<boolean> = new Observable((observer) => { });

public saveChanges() {
    this.openSaveChangeModal();
}

// Modal save changes
public openSaveChangeModal() {
    $('#savePortfolioChangesModal').modal();
}

public closeSaveChangesModal() {
     this.modalResponse = new Observable((observer) => {
        observer.next(false);
    });
    $('#savePortfolioChangesModal').modal('hide');
}

public saveSaveChangesModal() {
    this.modalResponse = new Observable((observer) => {
        observer.next(true);
    });
    $('#savePortfolioChangesModal').modal('hide');
}

On the first "Save" nothing is happening once the modal is shown. On the second "Save", the navigation would happen before I answer the modal. How can I make it resolve at the right time?