title: Angular use modal dialog in canDeactivate Guard service for unsubmitted changes (Form dirty)
body: <p>In my Angular 4 application I have some components with a form, like this:</p>
  
  <pre><code>export class MyComponent implements OnInit, FormComponent {
  
    form: FormGroup;
  
    ngOnInit() {
      this.form = new FormGroup({...});
    }
  </code></pre>
  
  <p>they use a Guard service to prevent unsubmitted changes to get lost, so if the user tries to change route before it will ask for a confirmation:</p>
  
  <pre><code>import { CanDeactivate } from '@angular/router';
  import { FormGroup } from '@angular/forms';
  
  export interface FormComponent {
    form: FormGroup;
  }
  
  export class UnsavedChangesGuardService implements CanDeactivate&lt;FormComponent&gt; {
    canDeactivate(component: FormComponent) {
      if (component.form.dirty) {
        return confirm(
          'The form has not been submitted yet, do you really want to leave page?'
        );
      }
  
      return true;
    }
  }
  </code></pre>
  
  <p>This is using a simple <code>confirm(...)</code> dialog and it works just fine.</p>
  
  <p>However I would like to replace this simple dialog with a more fancy modal dialog, for example using the <a href="https://valor-software.com/ngx-bootstrap/#/modals" rel="noreferrer">ngx-bootstrap Modal</a>.</p>
  
  <p>How can I achieve the same result using a modal instead?</p>