Is it possible to display a Bootstrap 5 modal popup in Angular using an ngIf condition?

Question

The challenge here arises from the fact that when using ngIf to conditionally display the modal, the modal element is not present in the DOM initially when the page is loaded because by default it is set to false. So for the first click the modal does not pop up but it shows up for the second time However, after closing the modal, the variable is set to false, leading to the removal of the modal element from the DOM and again on the next click it is not shown.

For subsequent interactions, when attempting to trigger the modal again by setting the variable to true, the modal element is not in the DOM, causing it not to be displayed. Essentially, the modal element needs to be dynamically added to the DOM just before triggering it and removed promptly after it is closed to ensure proper functionality on subsequent interactions. This ensures that the modal is present in the DOM only when needed, and it is removed when it is no longer required.

I've experimented with several approaches to address the issue:

1. Initialized the variable in the ngOnInit method and set it to true by default. However, this worked for the first click, but when the modal is closed, the variable is set to false, and it is removed from the DOM. Subsequently, when clicking for the second time, the modal is not present in the DOM.

2. Removed the ngIf condition, but encountered issues with data binding.

3. Attempted to use ngClass instead of ngIf, but this did not remove the modal div from the DOM.

4. Removed the modal class from the element and used ngIf, which worked, but the element no longer behaved as a modal.

Despite trying these various methods, none fully addressed the issue.

Below is the TS file

    constructor(private modalService: DatasetModalService, private alertService: AlertService) {

    }

    showConfirmationModal(message: string, parentRefObj: any) {
        this.parentRefObj = parentRefObj;
        this.showConfirmationWindow = true;
        this.message = message;
        console.log(this.message, "message.");
        
        setTimeout(() => this.visibleAnimate = true, 100);

        document.getElementById("showConfirmationModal").click();
    }

    confirmation(value: boolean) {
        this.hideConfirmationModal();
        this.parentRefObj.confirmation(value);
    }


    hideConfirmationModal() {
        this.visibleAnimate = false;
        setTimeout(() => this.showConfirmationWindow = false, 200);
        document.getElementById("closeConfirmationModal").click();
    }

Below is the HTML file

<div (click)="onContainerClicked($event)" *ngIf="showConfirmationWindow" keyboard="true" class="modal fade" id="confirmationModal" role="dialog">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">
            <div class="modal-header itemodelheading">
                <h4 class="modal-title" align="center">
                    <strong><span translate>confirmationModal.title.confirmation</span></strong>
                </h4>

                <button type="button" id="closeConfirmationModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="textCenter" align="center">
                    <span class="glyphicon glyphicon-warning-sign"></span> <span translate>{{message}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<button type="button" hidden="true" class="btn btn-primary" data-bs-toggle="modal" id="showConfirmationModal" data-bs-target="#confirmationModal">
    Launch confirmation modal
  </button>

Answer 1

I guess, you complicate a little bit. From my point of view, all that you need is:

// .ts
...

showModal = false;

onClickLaunchButton(): void {
  this.showModal = true;
}

closeModal(): void {
  this.showModal = false;
}

...

// .html

<div *ngIf="showModal" class="modal-dialog modal-lg">
  ...
  <button (click)="closeModal()">Confirm</button>
</div>

<button (click)="onClickLaunchButton()">Launch confirmation modal</button>