Dialog Windows

Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. The component opens a dialog window centered on top of app content. You can also provide a standard alert message that users can cancel.

Dialog Example

Alerts

Alerts are done by adding title, message, and button label.

<igx-dialog #alert
    title="Alert"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()">
</igx-dialog>

You can set title to the alert title="TitleofTheAlert"

You can be more descriptive and set message message="Your email has been sent successfully!"

You can attach to the left button select event (onLeftButtonSelect)="alert.close()"

Standard Dialogs

Dialogs are done by adding another button.

<igx-dialog #dialog
    title="Confirmation"
    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?"
    leftButtonLabel="Cancel"
    (onLeftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (onRightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>

You can access all properties of the button component with the following attributes:

leftButtonLabel

leftButtonType

leftButtonColor

leftButtonBackgroundColor

leftButtonRipple

Custom Dialogs

Custom Dialogs are done by adding any markup in the igx-dialog tag. When you are using Custom Dialogs you don't have a message property set.

<igx-dialog #form
    title="Sign In"
    leftButtonLabel="Cancel"
    (onLeftButtonSelect)="form.close()"
    rightButtonLabel="Sign In"
    rightButtonBackgroundColor="green"
    rightButtonColor="white"
    closeOnOutsideSelect="true">
    <div class="ig-form-group">
        <input type="text" igInput />
        <label igLabel>Username</label>
    </div>
    <div class="ig-form-group">
        <input type="password" igInput />
        <label igLabel>Password</label>
    </div>
</igx-dialog>

You can make the dialog dismissible `closeOnOutsideSelect="true"``