Angular ModalComponent
Do we have any example on how to use ModalComponent with Angular. How to handle the size and other details like submit/cancel close events?
Replies (6)
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>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:
<button class="btn btn-primary" (click)="openModal()">Open modal</button>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.
Thank you. How do we have the save and cancel event here? Can you please share any example ?
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 though if you can provide a simple working code example that would be immensely helpful for me and others as well.
Thanks you !
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 >
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?
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.
