Diálogo modal de uso angular en el servicio canDeactivate Guard para cambios no enviados (formulario sucio)

En mi aplicación Angular 4 tengo algunos componentes con un formulario, como este:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({...});
  }

usan un servicio Guard para evitar que se pierdan los cambios no enviados, por lo que si el usuario intenta cambiar la ruta antes de solicitar una confirmación:

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
  form: FormGroup;
}

export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
  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;
  }
}

Esto está usando un simpleconfirm(...) diálogo y funciona bien.

Sin embargo, me gustaría reemplazar este cuadro de diálogo simple con un cuadro de diálogo modal más elegante, por ejemplo, usando elngx-bootstrap Modal.

¿Cómo puedo lograr el mismo resultado usando un modal en su lugar?

Respuestas a la pregunta(3)

Su respuesta a la pregunta