title: Angular 2 : Use CanDeactivate, but showing modals instead of a window.confirm
body: <p>How can I use CanDeactivate using a bootstrap modal instead of a confirm? The fact is: how do I return an observable doing this process?</p>
  
  <p>The code is the following. <strong>CheckoutComponent</strong> is the same component and I have the modal and the one I want to prevent from deactivating</p>
  
  <pre><code>public modalResponse: Observable&lt;boolean&gt; = new Observable((observer) =&gt; { });
  
  public saveChanges() { ///OPEN MODAL AFTER CANDEAC
      this.openSaveChangeModal();
      return this.modalResponse.take(1);
  }
  
  canDeactivate(component: CheckoutComponent){
      if(this.nav)
          return true;
  
      else{
          component.saveChanges(); // Opens modal
      return component.modalResponse.take(1);
      }
  }
  
  // Modal save changes
  public openSaveChangeModal() {
      jQuery('#deactModal').modal();
  }
  
  public acceptNavigate(){
      this.modalResponse = new Observable((observer) =&gt; {observer.next(true); });
      jQuery('#deactModal').modal('hide');
  }
  
  public cancelNavigate(){
      this.modalResponse = new Observable((observer) =&gt; { observer.next(false); });
  
      jQuery('#deactModal').modal('hide');
  }
  </code></pre>
  
  <p>But I am dealing with</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'saveChanges' of undefined</p>
  </blockquote>