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:457

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:313

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:303

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:131

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:89

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:158

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:181

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:323

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:171

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:149

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:293

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:283

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:190

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:212

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:335

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:203

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:140

toggleRef

Section titled "toggleRef" 
toggleRef: IgxToggleDirective

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

Accessors

Section titled "Accessors"

closeOnEscape

Section titled "closeOnEscape"

Controls whether the dialog should close when Esc key is pressed. Defaults to true

<igx-dialog [closeOnEscape]="false" ></igx-dialog>
get closeOnEscape(): boolean

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

Returns boolean 

set closeOnEscape(val: boolean): void

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

Parameters

  • val: boolean

Returns void

closeOnOutsideSelect

Section titled "closeOnOutsideSelect"

Gets/Sets whether the dialog should close on click outside the component. By default it's false.

<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()"
rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>
get closeOnOutsideSelect(): boolean

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

Returns boolean 

set closeOnOutsideSelect(val: boolean): void

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

Parameters

  • val: boolean

Returns void

isCollapsed

Section titled "isCollapsed" 
get isCollapsed(): boolean

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

Returns boolean

isModal

Section titled "isModal"

Controls whether the dialog should be shown as modal. Defaults to true

<igx-dialog [isModal]="false" ></igx-dialog>
get isModal(): boolean

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

Returns boolean 

set isModal(val: boolean): void

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

Parameters

  • val: boolean

Returns void

isOpen

Section titled "isOpen"

State of the dialog.

// get
let dialogIsOpen = this.dialog.isOpen;
<!--set-->
<igx-dialog [isOpen]='false'></igx-dialog>

Two-way data binding.

<!--set-->
<igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
get isOpen(): boolean

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

Returns boolean 

set isOpen(value: boolean): void

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

Parameters

  • value: boolean

Returns void

positionSettings

Section titled "positionSettings"

Get the position and animation settings used by the dialog.

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

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

Returns PositionSettings

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;
set positionSettings(settings: PositionSettings): void

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

Parameters

Returns void

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:416

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:359

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:440

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:507

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:469

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:484

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:522

Returns void