Angular NgbModal: Confirmation Modal Closes But Parent Modal Remains Open

Issue:

I have an Angular application where I use NgbModal for opening a confirmation modal when the user tries to close an edit modal that contains unsaved changes.

The problem is:

Clicking "X" on the Edit Feature Flag Values modal correctly triggers the confirmation modal.

Clicking "Yes, Close" in the confirmation modal only closes the confirmation modal, but the Edit Feature Flag Values modal remains open.

If I cancel the confirmation modal once (click "No, Keep Editing"), clicking "X" again does not trigger the confirmation modal unless a value is changed.

Code for the Confirmation Modal (ConfirmModalComponent)

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'app-confirm-modal',
templateUrl: './confirm-modal.component.html',
styleUrls: ['./confirm-modal.component.scss']
})
export class ConfirmModalComponent {
@Input() title: string = 'Confirmation';
@Input() message: string = 'Are you sure you want to proceed?';
@Input() confirmButtonText: string = 'Yes';
@Input() cancelButtonText: string = 'No';
@Output() onConfirm = new EventEmitter<boolean>();
@Output() onCancel = new EventEmitter<void>(); // Added onCancel output

constructor(public activeModal: NgbActiveModal) {}

confirm() {
this.onConfirm.emit(true);
this.activeModal.close(true);
}

cancel() {
this.onCancel.emit(); // Ensure onCancel event is emitted
this.activeModal.dismiss(false); // Close confirmation modal
}
}


Code for the Edit Feature Modal (FeatureValuesEditDialogComponent)

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { ConfirmModalComponent } from '../../../shared/components/confirm-modal/confirm-modal.component';
import { take } from 'rxjs/operators';

@Component({
selector: 'app-feature-values-edit-dialog',
templateUrl: './feature-values-edit-dialog.component.html',
styleUrls: ['./feature-values-edit-dialog.component.scss']
})
export class FeatureValuesEditDialogComponent implements OnInit {
@Input() value: any = { level: '', levelId: '', levelValue: '', begins: '', ends: '' };
@Output() save = new EventEmitter<any>();

hasUnsavedChanges: boolean = false;

constructor(private modalService: NgbModal) {}

/**
* Opens confirmation modal if there are unsaved changes before closing
*/
confirmClose() {
if (this.hasUnsavedChanges) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
keyboard: false
});

modalRef.componentInstance.title = 'Unsaved Changes';
modalRef.componentInstance.message = 'You have unsaved changes. Are you sure you want to close?';
modalRef.componentInstance.confirmButtonText = 'Yes, Close';
modalRef.componentInstance.cancelButtonText = 'No, Keep Editing';

// Handle confirmation: Close both modals
modalRef.componentInstance.onConfirm.pipe(take(1)).subscribe(() => {
this.hasUnsavedChanges = false;
this.close(); // Close the edit modal
modalRef.close(); // Close confirmation modal
});

// Handle cancellation: Only close confirmation modal
modalRef.componentInstance.onCancel.pipe(take(1)).subscribe(() => {
modalRef.close(); // Close confirmation modal
});
} else {
this.close(); // No unsaved changes, directly close
}
}

/**
* Closes the edit modal
*/
close() {
this.hasUnsavedChanges = false;
this.save.emit(null);
}
}


Expected Behavior:

Expected Behavior: ✅ Clicking "X" or "Close" always triggers the confirmation modal if there are unsaved changes. ✅ Clicking "Yes, Close" closes both modals (confirmation modal + edit modal). ✅ Clicking "No, Keep Editing" only closes the confirmation modal, keeping the edit modal open. ✅ If I cancel the confirmation modal once, clicking "X" again still triggers the confirmation modal.

Actual Behavior (Issue Faced): ❌ Clicking "Yes, Close" only closes the confirmation modal, but the edit modal remains open. ❌ If I cancel the confirmation modal once, clicking "X" again does not trigger the confirmation modal unless I change a value.

What I've Tried: Ensuring this.close(); is called before modalRef.close(); inside confirmClose(). Adding @Output() onCancel = new EventEmitter(); to ConfirmModalComponent. Verifying the "Close" button inside the edit modal calls confirmClose() instead of close(). Making sure clicking "X" in the confirmation modal emits onCancel properly. Question: Why does clicking "Yes, Close" only close the confirmation modal but not the edit modal? Why does canceling the confirmation modal once cause the "X" button in the edit modal to stop triggering the confirmation modal unless a value is changed? Is there a better way to ensure both modals close properly when confirming, while still allowing cancelation to work correctly? Any help or insights would be greatly appreciated! Thanks in advance!

Continue reading...