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>

Constructors

Section titled "Constructors"

IgxDialogComponent

new IgxDialogComponent(): IgxDialogComponent

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:436

Returns IgxDialogComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

An event that is emitted after the dialog is closed.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:293

closing

Section titled "closing"

An event that is emitted before the dialog is closed.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:283

focusTrap

Section titled "focusTrap"

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

<igx-dialog focusTrap="false""></igx-dialog>
focusTrap: boolean = true

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:111

id

Section titled "id"

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>
id: string

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:69

leftButtonLabel

Section titled "leftButtonLabel"

Sets the label of the left button of the dialog.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:138

leftButtonRipple

Section titled "leftButtonRipple"

Sets 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>
leftButtonRipple: string = ''

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:161

leftButtonSelect

Section titled "leftButtonSelect"

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

<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
leftButtonSelect: EventEmitter<IDialogEventArgs>

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:303

leftButtonType

Section titled "leftButtonType"

Sets 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>
leftButtonType: IgxButtonType = 'flat'

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:151

message

Section titled "message"

Sets the message text of the dialog.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:129

opened

Section titled "opened"

An event that is emitted after the dialog is opened.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:273

opening

Section titled "opening"

An event that is emitted before the dialog is opened.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:263

rightButtonLabel

Section titled "rightButtonLabel"

Sets the label of the right button of the dialog.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:170

rightButtonRipple

Section titled "rightButtonRipple"

Sets the right button ripple.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:192

rightButtonSelect

Section titled "rightButtonSelect"

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>
rightButtonSelect: EventEmitter<IDialogEventArgs>

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:315

rightButtonType

Section titled "rightButtonType"

Sets 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>
rightButtonType: IgxButtonType = 'flat'

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:183

title

Section titled "title"

Sets the title of the dialog.

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

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:120

toggleRef

Section titled "toggleRef" 
toggleRef: IgxToggleDirective

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:57

closeOnEscape

Section titled "closeOnEscape" 
closeOnEscape: boolean

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:94, projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:98

closeOnOutsideSelect

Section titled "closeOnOutsideSelect" 
closeOnOutsideSelect: boolean

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:203, projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:207

isModal

Section titled "isModal" 
isModal: boolean

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:78, projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:82

isOpen

Section titled "isOpen" 
isOpen: boolean

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:363, projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:366

positionSettings

Section titled "positionSettings" 
positionSettings: PositionSettings

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:220, projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:242

Accessors

Section titled "Accessors"

isCollapsed

Section titled "isCollapsed" 
get isCollapsed(): boolean

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:380

Returns boolean

role

Section titled "role"

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;
}
 ```
get role(): "dialog" | "alertdialog" | "alert"

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:395

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

state

Section titled "state"

Returns the value of state. Possible state values are "open" or "close".

@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
    let dialogState = this.dialog.state;
}
get state(): string

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:339

Returns string

titleId

Section titled "titleId"

Returns the value of the title id.

@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
    let dialogTitle = this.dialog.titleId;
}
get titleId(): string

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:419

Returns string

Methods

Section titled "Methods"

close

Section titled "close"

A method that that closes the dialog.

close(): void

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:486

Returns void

ngAfterContentInit

Section titled "ngAfterContentInit"

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.

ngAfterContentInit(): void

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:448

Returns void

open

Section titled "open"

A method that opens the dialog.

open(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:463

Parameters

Returns void

toggle

Section titled "toggle"

A method that opens/closes the dialog.

toggle(): void

Defined in projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:501

Returns void