An event that is emitted after the dialog is closed.
<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
An event that is emitted before the dialog is closed.
<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
Set whether the Tab key focus is trapped within the dialog when opened.
Defaults to true.
<igx-dialog focusTrap="false""></igx-dialog>
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>
Sets the label of the left button of the dialog.
<igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
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>
An event that is emitted when the left button is clicked.
<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
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>
Sets the message text of the dialog.
<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
An event that is emitted after the dialog is opened.
<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
An event that is emitted before the dialog is opened.
<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
Sets the label of the right button of the dialog.
<igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
Sets the right button ripple.
<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
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>
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>
Sets the title of the dialog.
<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
Controls whether the dialog should close when Esc key is pressed. Defaults to true
<igx-dialog [closeOnEscape]="false" ></igx-dialog>
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>
Controls whether the dialog should be shown as modal. Defaults to true
<igx-dialog [isModal]="false" ></igx-dialog>
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 the position and animation settings used by the dialog.
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
let currentPosition: PositionSettings = this.alert.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;
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 the value of state. Possible state values are "open" or "close".
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogState = this.dialog.state;
}
Returns the value of the title id.
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogTitle = this.dialog.titleId;
}
A method that opens the dialog.
<button type="button" (click)="dialog.open() igxButton="contained">Trigger Dialog</button>
<igx-dialog #dialog></igx-dialog>
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: