Web Components Dialog Overview

    The Ignite UI for Web Components Dialog component is used to display some information or prompt the user for an action or confirmation. It is shown in a modal window, which means that the user is not allowed to interact with the main app until a certain action is performed that closes the dialog.

    Ignite UI for Web Components Dialog Example

    This sample demonstrates how to create a Dialog component in Web Components.

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents

    import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';

defineComponents(IgcDialogComponent);

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to display the dialog component is to use its show method and call it on a button click.

    <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

<igc-dialog id="dialog" title="Confirmation">
    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">Cancel</igc-button>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">OK</igc-button>
</igc-dialog>

    The Dialog component provides an open property, which gives you the ability to configure its state as per your application scenario.

    Use the title property to set the title of the dialog. However, if any content is provided in the title slot, it will take precedence over the property.

    Action buttons or additional information can be placed in the bottom part of the dialog via the footer slot. If no content is added there, a default OK button will be shown that closes the Dialog when clicked. In case you do not want this button to be shown you can set the hideDefaultAction property to true. The default value is false.

    Closing

    By default, the Dialog is closed automatically when the user presses ESC. You could prevent this behavior using the keepOpenOnEscape property. The default value is false. If there is an open dropdown (or any other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog.

    Use the closeOnOutsideClick property to configure if the dialog should be closed when clicking outside of it. The default value is false.

    Form

    Form elements can close a Dialog if they have the attribute method="dialog". Submitting the form will trigger the closing of the dialog.

    Styling

    The dialog component exposes several CSS parts (base, title, content and footer) to give you full control over its style.

    igc-dialog::part(content) {
    background: #011627;
    color: white;
}

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color: #ECAA53;
}

    API References

    Additional Resources