Class IgxDialogComponent

Ignite UI for Angular Dialog Window - Documentation

The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display more complicated visuals such as a user sign-in form. It also provides a right and left button which can be used for custom actions.

Example:

<button type="button" igxButton (click)="form.open()">Show Dialog</button>
<igx-dialog #form title="Sign In" rightButtonLabel="OK">
<div>
<igx-input-group>
<input type="text" igxInput/>
<label igxLabel>Username</label>
</igx-input-group>
</div>
<div>
<igx-input-group>
<input type="password" igxInput/>
<label igxLabel>Password</label>
</igx-input-group>
</div>
</igx-dialog>

Hierarchy

Hierarchy

  • IgxDialogComponent

Implements

Constructors

Properties

closed: EventEmitter<IDialogEventArgs> = ...

An event that is emitted after the dialog is closed.

<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
closing: EventEmitter<IDialogCancellableEventArgs> = ...

An event that is emitted before the dialog is closed.

<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
focusTrap: boolean = true

An

Input

property to set whether the Tab key focus is trapped within the dialog when opened. Defaults to true.

<igx-dialog focusTrap="false""></igx-dialog>
id: string = ...

An

Input

property that sets the value of the id attribute. If not provided it will be automatically generated.

<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification"
leftButtonLabel="OK" (leftButtonSelect)="alert.close()">
</igx-dialog>
leftButtonBackgroundColor: string = ''

An

Input

property to set the left button background-color. The property accepts all valid CSS color property values.

<igx-dialog leftButtonBackgroundColor="black" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonColor: string = ''

An

Input

property to set the left button color. The property accepts all valid CSS color property values.

<igx-dialog leftButtonColor="yellow" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonLabel: string = ''

An

Input

property to set the label of the left button of the dialog.

<igx-dialog leftButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonRipple: string = ''

An

Input

property to set the left button ripple. The ripple animates a click/tap to a component as a series of fading waves. The property accepts all valid CSS color property values.

<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonSelect: EventEmitter<IDialogEventArgs> = ...

An event that is emitted when the left button is clicked.

<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
leftButtonType: IgxButtonType = 'flat'

An

Input

property to set the left button type. The types are flat, contained and fab. The flat type button is a rectangle and doesn't have a shadow.
The contained type button is also a rectangle but has a shadow.
The fab type button is a circle with a shadow.
The default value is flat.

<igx-dialog leftButtonType="contained" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
message: string = ''

An

Input

property controlling the message of the dialog.

<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
opened: EventEmitter<IDialogEventArgs> = ...

An event that is emitted after the dialog is opened.

<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
opening: EventEmitter<IDialogCancellableEventArgs> = ...

An event that is emitted before the dialog is opened.

<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
rightButtonBackgroundColor: string = ''

An

Input

property to set the right button background-color. The property accepts all valid CSS color property values.

<igx-dialog rightButtonBackgroundColor="black" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonColor: string = ''

An

Input

property to set the right button color. The property accepts all valid CSS color property values.

<igx-dialog rightButtonColor="yellow" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonLabel: string = ''

An

Input

property to set the label of the right button of the dialog.

<igx-dialog rightButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonRipple: string = ''

An

Input

property to set the right button ripple.

<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonSelect: EventEmitter<IDialogEventArgs> = ...

An event that is emitted when the right button is clicked.

<igx-dialog (rightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>
rightButtonType: IgxButtonType = 'flat'

An

Input

property to set the right button type. The types are flat, contained and fab. The flat type button is a rectangle and doesn't have a shadow.
The contained type button is also a rectangle but has a shadow.
The fab type button is a circle with a shadow.
The default value is flat.

<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
title: string = ''

An

Input

property controlling the title of the dialog.

<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>

Accessors

  • get positionSettings(): PositionSettings
  • Get the position and animation settings used by the dialog.

    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
    let currentPosition: PositionSettings = this.alert.positionSettings

    Returns PositionSettings

  • set positionSettings(settings): void
  • Set the position and animation settings used by the dialog.

    import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
    public newPositionSettings: 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 }
    };
    this.alert.positionSettings = this.newPositionSettings;

    Parameters

    Returns void

  • get role(): "dialog" | "alertdialog" | "alert"
  • Returns the value of the role of the dialog. The valid values are dialog, alertdialog, alert.

    @ViewChild("MyDialog")
    public dialog: IgxDialogComponent;
    ngAfterViewInit() {
    let dialogRole = this.dialog.role;
    }

    Returns "dialog" | "alertdialog" | "alert"

Methods