Search code examples
angularabp-framework

Execute function on abp modal close action

I'm currently working on ABP framework, version 7, with Angular for the UI

So in a simple HTML of the angular project, I added a new abp modal.

The modal is working correctly; the buttons are showing ok etc. Well, now I created a function that I want to execute on modal close, so I added a close button like this:

 <button
      type="button"
      class="btn btn-secondary"
      (click)="onCloseButtonClick()"
      abpClose
      [style.display]="areReplyFieldsVisible ? 'block' : 'none'">
      {{ '::Close' | abpLocalization }}
    </button>

And my function in the ts file as:

 onCloseButtonClick(): void {
    this.isCreateEditModalOpen = false;
    this.areReplyFieldsVisible = false;
  }

So, when I hit the button, it executes my function as it should. Now I want to execute the same function when the default abp modal close button is clicked:

enter image description here

I tried to achieve this using close as:

<abp-modal [(visible)]="isViewModalOpen" (hidden)="onCloseButtonClick()">

But this does not execute the function on the backdrop click; how can I manage these two situations correctly?

  1. Execute function on abp generic close modal button
  2. Execute function on modal backdrop click (area outside the modal)
Solution

  • Hi I'm a bit late with the answer but you can use the disappear output of the modal:

    <abp-modal [(visible)]="isModalOpen" (disappear)="close()">

    See the documentation: https://docs.abp.io/en/abp/latest/UI/Angular/Modal#outputs