Modal dialog box and popups in Angular.js using ngDialog

If you are building an Angular.js application and wish to add a modal dialog box or a simple popup, then the ngDialog module provides an easy, simple solution. It provides two default css themes and we can also add our own custom themes.

Let's see how to create a simple dialog box with ngDialog.
For our example, we will have a base page with a button which when clicked will open a contact-us form as dialog box. The dialog box will have an 'OK' button which will save the changes and close the box and a 'Cancel' button which will just dismiss the box.

1. First, you need to download ngDialog.js and ngDialog.css (and the themes that you want) from https://github.com/likeastore/ngDialog

2. Create the base template - 'base.html'


3. Create the dialog box template - 'contact_us.html'

closeThisDialog() and confirm() are ngDialog's methods and they return an Angular promise object that is either rejected or resolved.

4. Angular.js code to handle the promise:

Now if you wish to add a popup message as per the response success or failure:

The plain option, if set to 'true' allows to use a plain string as template.
The API also provides a lot of other useful options and event handlers.