title: Popup Modal Dialog from Route Guard
body: <p>From blog post <a href="https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html" rel="nofollow noreferrer">protecting routes using guards in angular</a> we can pop a message when a user cannot access a route. :</p>
  
  <pre><code>import { CanDeactivate } from '@angular/router';
  import { CanDeactivateComponent } from './app/can-deactivate';
  
  export class ConfirmDeactivateGuard implements CanDeactivate&lt;CanDeactivateComponent&gt; {
  
    canDeactivate(target: CanDeactivateComponent) {
      if(target.hasChanges()){
          return window.confirm('Do you really want to cancel?');
      }
      return true;
    }
  }
  </code></pre>
  
  <p>I would like to show a modal dialog using <a href="http://valor-software.com/ngx-bootstrap/#/modals" rel="nofollow noreferrer">ngx-bootstrap</a> to allow the user to login. </p>
  
  <p>I have managed to get some simple code loading the modal from the main app (eg not a child view from my <code>app.component.ts</code>), such as</p>
  
  <pre><code>showloginModal() {
    this.loginModal.show();
  }
  </code></pre>
  
  <p>the modal is loaded from another HTML file with (I include the core login code with the selector app-login</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
    &lt;app-login  #loginModal&gt; &lt;/app-login&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>edit</em>
  I have just had a look at <a href="https://long2know.com/2017/01/angular2-dialogservice-exploring-bootstrap-part-2/" rel="nofollow noreferrer">Angular2 DialogService – Exploring Bootstrap</a> and that looks like it does the job but it's for bootstrap4</p>