Как использовать пользовательское модальное всплывающее окно вместо использования диалогового окна подтверждения в файле TS в Angular

Question

У меня есть форма в моем проекте Angular, где Я пытаюсь реализовать пользовательское модальное всплывающее окно вместо использования диалогового окна подтверждения , которое появляется, когда клиент заполняет форму, а между попытками покинуть формутогда появится пользовательский модал с сообщением, просящим y / n выйти

. Для этого я использовал CanDeactivate route guard в Angular, получая доступ к угловой переменной шаблона в классе компонентов.

Я ставлю код ts ниже

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { CreateEmployeeComponent } from './create-employee.component';

@Injectable()
export class CreateEmployeeCanDeactivateGuardService  implements CanDeactivate<CreateEmployeeComponent>   {
    constructor() { }

    canDeactivate(component: CreateEmployeeComponent): boolean {

        if (component.createEmployeeForm.dirty) {
            return confirm('Are you sure you want to discard your changes?');
        }

        return true;
    }

}

Как видите, код содержит встроенную функцию js verify (), return confirm('Are you sure you want to discard your changes?');

**I want to replace this with a custom modal popup  how can I do that** 

Answer 1

На мой вопрос, который я задавал выше, я пробовал использовать модальности ngx-bootrap, и модель работает нормально