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:

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:

Here, app-modal represents the modal component, #modal is a template reference variable that you can use to interact with the modal component in your component code, and [modalConfig] is an input property that accepts the configuration for the modal.

3. Define the modal configuration in your component. Create a property modalConfig of type ModalConfig and set the desired values for the modal title, dismiss button label, and close button label. For example:

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

Feel free to customize these values according to your requirements.

4. Use @ViewChild decorator to get a reference to the modal component in your component code. Add the following line to your component:

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

Here, modal is the template reference variable defined in the modal component in your template.

5. Implement the openModal() method in your component to handle the opening of the modal. You can use the open() method provided by the ModalComponent to open the modal asynchronously. For example:

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

6. In your template, add a button or any other element that triggers the openModal() method when clicked. For example:

    Open modal

Make sure to bind the click event to the openModal() method in your component.

That's it! You should now be able to use the modal in your Angular application. Customize the modal body HTML as needed within the <app-modal> component in your template.