Dialog Window

    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.

    Angular Dialog Window Example

    Usage

    The first step is to import the IgxDialogModule in our app.module.ts file:

    // app.module.ts
    
    ...
    import { IgxDialogModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxDialogModule],
        ...
    })
    export class AppModule {}
    

    Alert Dialog

    To create an alert dialog, in the template of our email component, we add the following code. We have to set the title, message, leftButtonLabel and handle leftButtonSelect event:

    <!--email.component.html-->
    <button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
    
    <igx-dialog #alert
        title="Notification"
        message="Your email has been sent successfully!"
        leftButtonLabel="OK"
        (leftButtonSelect)="alert.close()">
    </igx-dialog>
    

    If everything's done right, you should see the demo sample shown above in your browser.

    Standard Dialog

    To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the title, message, leftButtonLabel, rightButtonLabel, and handle leftButtonSelect and rightButtonSelect events:

    <!--file-manager.component.html-->
    <button igxButton="raised" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>
    
    <igx-dialog #dialog title="Confirmation"
        leftButtonLabel="Cancel"
        (leftButtonSelect)="dialog.close()"
        rightButtonLabel="OK"
        (rightButtonSelect)="onDialogOKSelected($event)"
        message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
    </igx-dialog>
    

    Custom Dialog

    To create a custom dialog, in the template of our sign-in component, we add the following code. The dialog title area can be customized using the igxDialogTitle directive or the igx-dialog-title selector. The actions area can be customized using the igxDialogActions directive or the igx-dialog-actions selector. We add two input groups consisting of a label and and input decorated with the igxLabel and igxInput directives.

    <!--sign-in.component.html-->
    <button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>
    
    <igx-dialog #form [closeOnOutsideSelect]="true">
        <igx-dialog-title>
            <div class="dialog-container">
                <igx-icon>vpn_key</igx-icon>
                <div class="dialog-title">Sign In</div>
            </div>
        </igx-dialog-title>
    
        <form class="signInForm">
            <igx-input-group>
                <igx-prefix>
                    <igx-icon>person</igx-icon>
                </igx-prefix>
                <label igxLabel for="username">Username</label>
                <input igxInput id="username" type="text"/>
            </igx-input-group>
            <igx-input-group>
                <igx-prefix>
                    <igx-icon>lock</igx-icon>
                </igx-prefix>
                <label igxLabel>Password</label>
                <input igxInput id="password" type="password"/>
            </igx-input-group>
        </form>
    
        <div igxDialogActions>
            <button igxButton (click)="form.close()">CANCEL</button>
            <button igxButton (click)="form.close()">SIGN IN</button>
        </div>
    </igx-dialog>
    

    Position and Animation Settings

    There are two ways to change the position at which the igxDialog will be shown:

    public positionSettingsOnOpen: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Right,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Middle,
    };
    public overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(this.positionSettingsOnOpen),
        scrollStrategy: new NoOpScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };
    ....
    public openDialog() {
        this.alert.open(this.overlaySettings);
    }
    ....
    this.dialog.open(overlaySettings)
    
    • Use the positionSettings @input. Example:
    <igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
    </igx-dialog>
    
    public positionSettings: PositionSettings = {
        openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
        horizontalDirection: HorizontalAlignment.Left,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Middle,
        minSize: { height: 100, width: 100 }
    };
    
    Note

    The same approach should be used for the animation settings, use the openAnimation and closeAnimation properties to define animation params like duration. params object example:

    params: {
        delay: '0s',
        duration: '350ms',
        easing: EaseOut.quad,
        endOpacity: 1,
        fromPosition: 'translateX(-500px)',
        startOpacity: 0,
        toPosition: 'translateY(0)'
    }
    

    Trap focus inside dialog

    By default when the dialog is opened the Tab key focus is trapped within it, i.e. the focus does not leave the element when the user keeps tabbing through the focusable elements. When the focus leaves the last element, it moves to the first one and vice versa, when SHIFT + TAB is pressed, when the focus leaves the first element, the last element should be focused. In case the dialog does not contain any focusable elements, the focus will be trapped on the dialog container itself. This behavior can be changed by setting the focusTrap property.

    Styling

    To get started with styling the dialog window, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    Following the simplest approach, we create a new theme that extends the dialog-theme and accepts parameters that style the dialog.

    $my-dialog-theme: dialog-theme(
        $background: #011627,
        $title-color: #ECAA53,
        $message-color: #FEFEFE,
        $border-radius: .3,
    );
    
    Note

    In order to style any additional components that are used as part of the dialog window's content (such as the IgxButton), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).

    Since the dialog window uses the IgxOverlayService, in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.

    <div igxOverlayOutlet>
        <igx-dialog #dialog1>
            <!-- .... -->
        </igx-dialog>
    </div>
    
    Note

    In order to learn more about the various options for providing themes to elements that are shown by using the IgxOverlayService, you can take a look at the Overlay styling topic.

    Including Themes

    The last step is to include the component theme in our application.

    If $legacy-support is set to true, include the theme like that:

     @include dialog($my-dialog-theme);
    
    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

    :host {
         ::ng-deep {
            @include dialog($my-dialog-theme);
        }
    }
    

    If $legacy-support is set to false(default), include the component css variables like that:

    @include css-vars($my-dialog-theme);
    
    Note

    If the component is using an Emulated ViewEncapsulation, you still have to use :host because you need a global selector in order to override the variables.

    :host {
        @include css-vars($my-dialog-theme);
    }
    

    Demo

    API Summary

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.