Post
Ask Question

Dialog Window In Angular Using Ignite-UI

The dialog window is a graphical control element or a small window that communicates information between an application and a user. It is very helpful to prompt information, warnings and other messages within the application. For example in the web application when a user tries to access any restricted resource system, it can prompt a warning message in the dialog window.

Ignite UI Angular provides very useful standard and custom dialog windows for the web application.

What we will cover in this article?

  1. Introduction
  2. Install Ignite UI for Angular
  3. Create an Angular Project with Ignite UI
  4. Import the IgxDialogModule
  5. Alert Dialog
  6. Standard Dialog
  7. Custom Dialog
  8. Conclusion

Introduction

To show information, warnings, or other messages use the Ignite UI for Angular Dialog Window component or present forms for users to fill out. This component opens a dialog window centered on top of the app content and shows a small window. You can also provide a standard alert message that users can cancel.

Install Ignite UI for Angular

You must have node and npm installed on your machine. If you are new to npm, check out the npm documentation here. https://docs.npmjs.com/cli/install otherwise

Open the command prompt and run.

“npm install -g igniteui-cli”

Create an Angular project with Ignite UI

To create a new project run the below command.

“ng new igniteui-dialog-window-demo”

To get into the project-

“cdigniteui-dialog-window-demo”

Now, it’s time to install the Ignite UI for this project. Run the following command:

“npm install igniteui-angular”

Let’s add the required Ignite UI styles and the “HammerJs” library in the angular-cli.json.

Open the “angular.json” and add below code snippet as shown Listing 1.

  1. "styles": [   
  2.    "../node_modules/igniteui-angular/styles/igniteui-angular.css"   
  3. ]   
  4. "scripts": ["../node_modules/hammerjs/hammer.min.js"]   

Listing 1.

Now, we have configured Ignite UI with our Angular project successfully.

Adding Material Icons

  1. /* style.css */  
  2. @import url('https://fonts.googleapis.com/icon?family=Material+Icons');  

Run the following command on command prompt to run the Angular application.

ng serve --open

The application will run using the following address and port “http://localhost:4200”

Import the IgxDialogModule

Open the “app.module.ts” file and import the IgxDatePickerModule in the import section of @NgModule

  1. import {  
  2.     IgxDialogModule  
  3. } from 'igniteui-angular';  
  4. @NgModule({  
  5.     imports: [  
  6.         IgxDialogModule  
  7.     ],  
  8.     providers: [],  
  9.     bootstrap: [AppComponent]  
  10. })  
  11. export class AppModule {}  

Listing 2.

Add the dialog-window-page component

Let’s add the new component named dialog-window-page. To do that run the below command on command prompt.

ng generate component components/dialog-window-page

Listing 3.

Dialog Window In Angular Using Ignite-UI
Figure 1.

Now, add the <app-dialog-window-page></app-dialog-window-page> in app.component.html file.

Alert Dialog

An alert dialog is only used to show information to the users, we can make any decision using this dialog window, it is just used for showing information. Let’s add the alert dialog. To do that add the igx-dialog directive in “dialog-window-page.component.html” page as shown in listing 4.

  1. <igx-input-group>  
  2.     <igx-prefix>  
  3.         <igx-icon>person</igx-icon>  
  4.     </igx-prefix>  
  5.     <label igxLabel for="name">Name</label>  
  6.     <input igxInput id="name" type="text" [(ngModel)]="name" name="name" />  
  7. </igx-input-group>  
  8. <igx-input-group>  
  9.     <igx-prefix>  
  10.         <igx-icon>home</igx-icon>  
  11.     </igx-prefix>  
  12.     <label igxLabel>City</label>  
  13.     <input igxInput id="city" type="text" [(ngModel)]="city" name="city" />  
  14. </igx-input-group>  
  15. <igx-input-group>  
  16.     <igx-prefix>  
  17.         <igx-icon>phone</igx-icon>  
  18.     </igx-prefix>  
  19.     <label igxLabel>Phone</label>  
  20.     <input igxInput id="phone" type="number" maxlength="10" [(ngModel)]="phoneNumber" name="phoneNumber" />  
  21. </igx-input-group>  
  22. <button igxButton="raised" igxRipple="white" (click)="alert.open()">Submit</button>  

Listing 4.

  1. <igx-dialog #alert title="Notification" message="Data submitted successfully.!" leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>  

Listing 5.

Now run the application using “ng server --open”

Dialog Window In Angular Using Ignite-UI 
Figure 2.
 
Dialog Window In Angular Using Ignite-UI 
Figure 3.

Standard Dialog

Standard dialog window can allow making a decision on the basis of user input, we can ask the user for “Yes” or “No” (Ok or Cancel).

Let’s add the standard dialog. To do that open the “dialog-window-page.component.html” and add the following HTML code as shown in Listing 6.

Note
We are using two-way binding in this sample to show user inputs on the page as {{message}}.

  1. <b> {{message}} </b>  
  2. <igx-input-group>  
  3.     <igx-prefix>  
  4.         <igx-icon>person</igx-icon>  
  5.     </igx-prefix>  
  6.     <label igxLabel for="name">Name</label>  
  7.     <input igxInput id="name" type="text" [(ngModel)]="name" name="name" />  
  8. </igx-input-group>  
  9. <igx-input-group>  
  10.     <igx-prefix>  
  11.         <igx-icon>home</igx-icon>  
  12.     </igx-prefix>  
  13.     <label igxLabel>City</label>  
  14.     <input igxInput id="city" type="text" [(ngModel)]="city" name="city" />  
  15. </igx-input-group>  
  16. <igx-input-group>  
  17.     <igx-prefix>  
  18.         <igx-icon>phone</igx-icon>  
  19.     </igx-prefix>  
  20.     <label igxLabel>Phone</label>  
  21.     <input igxInput id="phone" type="number" maxlength="10" [(ngModel)]="phoneNumber" name="phoneNumber" />  
  22. </igx-input-group>  
  23. <button igxButton="raised" igxRipple="white" (click)="dialog.open()">Show Dialog</button>  
  24. <igx-dialog #dialog title="Confirmation" leftButtonLabel="No" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="Yes" (onRightButtonSelect)="onSubmit($event)" message="Are you sure you want to submit the information?">  
  25. </igx-dialog>  

Listing 6.

And in dialog-window-page.component.ts add the following code, it contains the “onSubmit” method that executes when the user selects the “Yes” as an option.

  1. export class DialogWindowPageComponent implements OnInit {  
  2.     name: string;  
  3.     city: string;  
  4.     phoneNumber: string;  
  5.     message: string;  
  6.     constructor() {}  
  7.     ngOnInit() {}  
  8.     public onSubmit(event) {  
  9.         this.message = 'Your Name:' + this.name + ', City: ' + this.city + ' Phone Number: ' + this.phoneNumber;  
  10.         event.dialog.close();  
  11.     }  
  12. }  

Listing 7.

(onLeftButtonSelect)="dialog.close()" is responsible to close the dialog window. To perform action on “Yes” option add (onRightButtonSelect)="onSubmit($event)" property in HTML and write the onSubmit(event) method in ts file as shown in Listing 6 and 7

Now, run the application to view the output,

Dialog Window In Angular Using Ignite-UI 
Figure 4.

Custom Dialog

Custom dialog window allows you to customize the UI. To add HTML controls in the dialog window, we can add input, label, dropdown, checkbox or etc.

Let’s add the custom dialog window in the project. To do that add the following HTML in “dialog-window-page.component.html” as shown in Listing 7.

  1. <button igxButton="raised" igRipple="white" (click)="form.open()">Show Dialog</button>  
  2. <igx-dialog #form title="Sign In" leftButtonLabel="Cancel" (onLeftButtonSelect)="form.close()" (onRightButtonSelect)="signIn($event)" rightButtonLabel="Sign In" closeOnOutsideSelect="true">  
  3.     <form class="signInForm">  
  4.         <igx-input-group>  
  5.             <igx-prefix>  
  6.                 <igx-icon>person</igx-icon>  
  7.             </igx-prefix>  
  8.             <label igxLabel for="username">Username</label>  
  9.             <input igxInput id="username" type="text" [(ngModel)]="userName" name="userName" />  
  10.         </igx-input-group>  
  11.         <igx-input-group>  
  12.             <igx-prefix>  
  13.                 <igx-icon>lock</igx-icon>  
  14.             </igx-prefix>  
  15.             <label igxLabel>Password</label>  
  16.             <input igxInput id="password" type="password" [(ngModel)]="password" name="password" />  
  17.         </igx-input-group>  
  18. </igx-dialog>  

Listing 8.

And in dialog-window-page.component.ts add the following code. It contains the “signIn” method that will execute the code when the user will choose the “Sign In” button.

  1. public signIn(event) {  
  2.     this.message = 'Your username:' + this.userName + ' and ' + this.password;  
  3.     event.dialog.close();  
  4. }  
  5. export class DialogWindowPageComponent implements OnInit {  
  6.     userName: string;  
  7.     password: string;  
  8.     customDialogInformation: string;  
  9.     constructor() {}  
  10.     ngOnInit() {}  
  11.     public signIn(event) {  
  12.         this.customDialogInformation = 'Your username:' + this.userName + ' and ' + this.password;  
  13.         event.dialog.close();  
  14.     }  
  15. }  

Listing 9.

Now, run the application to view the output.

Dialog Window In Angular Using Ignite-UI 
Figure 5.
 
Dialog Window In Angular Using Ignite-UI 
Figure 6.

Conclusion

The dialog window is a very useful component of Ignite UI to show information to the user. In this article, we saw how to add a dialog window, also see the custom setting for this component. It works responsively and flawlessly on any device of any size.

Learn more, download a free trial, and get started here,


Similar Articles