I have a component called Escrituracao that handles a client's billing information. It utilizes a mat-table to display all the necessary data. When creating a new bill, a modal window, known as CadastrarLancamentoComponent, is opened:
openModalLancamento(data) {
const modalOptions: NgbModalOptions = {};
modalOptions.backdrop = 'static';
const modalRef = this.modalService.open(CadastrarLancamentoComponent, modalOptions);
modalRef.result.then((result) => {
if (result) {
this.getLancamentosByPeriod();
}
}, (result) => {
if (result) {
//Functionality for result when using cancel button
this.getLancamentosByPeriod();
}
});
}
After adding a new bill, the modal remains open to allow for the addition of more bills (as intended). However, if the user chooses to close the modal window with the close or cancel button, the specific result value is triggered only if a bill was actually added. This allows the page to refresh by calling this.getLancamentosByPeriod();. On the other hand, if the cancel or close button is used without adding a bill, the modal simply closes without triggering a reload.
My main issue arises when the Escape key is used to close the modal. In this scenario, whether a bill was added or not, the modal will always just close without any further action being taken. I've attempted various solutions such as Output data transfers to the Financeiro component indicating if a bill was added, or trying to access specific data within the modal to retrieve a boolean value, but so far no solution has been found.
Is there a way to manipulate the modal result when it is closed using the escape key in order to force a particular behavior? Alternatively, is there a method to transmit this information back to the main page similar to how it behaves with the other closing actions? Essentially, what I am aiming for is to have the page behave consistently across all closing scenarios and trigger a reload upon closure if a bill was added.
This project is built using Angular/Typescript.