I have an onDismiss() method in my component, but my IDE (Webstorm) complains that: "Event onDismiss is not emitted by any applicable directives nor by app-modal component". Is my event binding incorrect?

<img src="https://i.imgur.com/Bds0u2w.png" />

Also, on clicking the "Update" button set to dismiss, code in onDismiss in my component does not get executed nor does a breakpoint get hit.

Sorry, it seems the html code in my previous reply was stripped from comment.
Could you please try this?

< app-modal #modal [modalConfig]="modalConfig" (onDismiss)="onSubmit()" (onClose)="onCancel()" >
<! -- Modal body HTML -->
</ app-modal >

Thank you though if you can provide a simple working code example that would be immensely helpful for me and others as well.
Thanks you !

Hi,

To handle the save and cancel events, you can use the `onDismiss` and `onClose` outputs provided by the `ModalComponent`. These outputs emit events when the user clicks on the dismiss or close buttons of the modal. You can subscribe to these events in your component and perform any actions you want. For example:


< app-modal #modal [modalConfig]="modalConfig" (onDismiss)="onSubmit()" (onClose)="onCancel()" >
<! -- Modal body HTML -->
</ app-modal >


Here, `onSubmit()` and `onCancel()` are methods defined in your component that handle the save and cancel events respectively. You can write any logic you want inside these methods, such as sending data to a server, validating inputs, closing the modal, etc.

I hope this helps. Let me know if you have any other questions.

Thanks

Thank you. How do we have the save and cancel event here? Can you please share any example ?

Hi,

To use a modal in Angular, you can follow the steps outlined below:

1. Import the `ModalsModule` from `_metronic/partials` into your module. Make sure to add it to the `imports` array of your module.

2. Place the modal component in your template using the following code:

<app-modal #modal [modalConfig]="modalConfig">
 <!-- Modal body HTML -->
 </app-modal>

modalConfig: ModalConfig = {
 modalTitle: "Modal title",
 dismissButtonLabel: "Submit",
 closeButtonLabel: "Cancel"
 };

@ViewChild("modal") private modalComponent: ModalComponent;

async openModal() {
 return await this.modalComponent.open();
 }

<button class="btn btn-primary" (click)="openModal()">Open modal</button>