##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
To get started with the Ignite UI for Angular Dialog Window, let's first import the IgxDialogModule in our app.module.ts file:
// app.module.ts
...
import { IgxDialogModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxDialogModule],
...
})
export class AppModule {}
Alert
To add alert, in the template of our email component we can add the following code to get the notification dialog. We have to set the title, message,
leftButtonLabel and handle leftButtonSelect event:
<!--email.component.html-->
<igx-dialog #alert
title="Notification"
message="Your email has been sent successfully!"
leftButtonLabel="OK"
(leftButtonSelect)="alert.close()">
</igx-dialog>
####Standard Dialog
To add standard dialog, in the template of our file manager component we can add the following code to get the standard dialog. We have to set the title, message,
leftButtonLabel, rightButtonLabel, and handle leftButtonSelect and rightButtonSelect events:
<!--file-manager.component.html-->
<igx-dialog #dialog title="Confirmation"
leftButtonLabel="Cancel"
(leftButtonSelect)="dialog.close()"
rightButtonLabel="OK"
(rightButtonSelect)="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 add custom dialog, in the template of our sign in component we can add the following code to get the custom dialog. We have to set the title,leftButtonLabel, rightButtonLabel, closeOnOutsideSelect and handle leftButtonSelect and rightButtonSelect event.
Also we can add two groups of label and input decorated with the igxLabel and igxInput directives.
<!--sign-in.component.html-->
<igx-dialog #form title="Sign In"
leftButtonLabel="Cancel"
(leftButtonSelect)="form.close()"
(rightButtonSelect)="signIn($event)"
rightButtonLabel="Sign In"
[closeOnOutsideSelect]="true">
<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>
</igx-dialog>
Customized Title and Actions
Dialog title area can be customized using igxDialogTitle directive or igx-dialog-title selector. The actions area can be customized using igxDialogActions directive or igx-dialog-actions selector.
<!-- dialog.component.html -->
<igx-dialog #dialog [closeOnOutsideSelect]="true" message="This will create a new social media account.">
<igx-dialog-title>
<div class="dialog-container">
<igx-icon>account_box</igx-icon>
<div class="dialog-title">Create a new account?</div>
</div>
</igx-dialog-title>
<div igxDialogActions class="dialog-container dialog-actions">
<button igxButton (click)="dialog.close()">CREATE</button>
<button igxButton (click)="dialog.close()">CANCEL</button>
</div>
</igx-dialog>
API Summary
Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
GitHub