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.

Dialog Demo

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 onLeftButtonSelect 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"
    (onLeftButtonSelect)="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 onLeftButtonSelect and onRightButtonSelect events:

<!--file-manager.component.html-->
<button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Confirmation Dialog</button>

<igx-dialog #dialog title="Confirmation"
    leftButtonLabel="Cancel"
    (onLeftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (onRightButtonSelect)="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)'
}

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:

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$my-dialog-theme: igx-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 this link.

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 igx-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 igx-dialog($my-dialog-theme);
    }
}

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

@include igx-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 igx-css-vars($my-dialog-theme);
}

Demo

API Summary

Additional Resources

Our community is active and always welcoming to new ideas.