I'm currently working on implementing data editing within a component. My task involves checking if any of the data fields have been altered, and if so, prompting a confirmation pop-up to appear. If the user confirms the change, the data will then be updated.
Within the updateData() method, I am invoking the isChangeConfirmed() function which triggers the pop-up and verifies if the Save button has been clicked. Upon confirmation, it should return true. However, instead of returning control to the updateData() method after this step, the data gets saved first before the pop-up window is displayed. What could be causing this unexpected behavior?
component.html
<button id="saveButton" type="button" (click)="updateData()" translate>BUTTON.SAVE</button>
<!-- POPUP -->
<ng-template #editModal let-modal>
<button type="submit" id="modalConfirmButton" (click)="modal.close('save')" class="btn btn-primary" translate>BUTTON.CONFIRM</button>
<button type="reset" id="modalCancelButton" (click)="modal.close('cancel')" class="btn btn-primary" translate>BUTTON.CANCEL</button>
</ng-template>
component.ts
updateData() {
if (this.isChangeConfirmed()) {
// Code for updating data goes here
}
}
isChangeConfirmed(): boolean {
if (this.oldValue != this.newValue) {
this
.ngbModal
.open(this.editModal, { ariaLabelledBy: 'editModal' })
.result
.then((result) => {
return result == "save";
}, (reason) => {
return false;
});
}
return true;
}