The Aurelia Dialog is a very useful Aurelia plugin for creating and showing popup dialogs in your Aurelia applications. The official repository can be found here:

aurelia-dialog does not come with the standard Aurelia installation so you need to take some steps before you can use it.

Follow these simple steps to install and start using Aurelia Dialog:

Run

jspm install aurelia-dialog

Go to your Aurelia configuration file (In my demos it’s main.ts) and add the plugin to the Aurelia configuration object as shown below:

The Aurelia Dialog module exports two classes, the DialogController and the DialogService. We can use the first one to create our own custom dialogs and the latter to trigger those dialogs.

In this tutorial, I am going to use the UserInfo class I introduced in my earlier tutorial about sharing state (link here) and display the user’s personal information on a custom dialog that’s triggered when a button is clicked. The dialog will ask the user if the information displayed on it is valid and provide the user with two “Yes” or “No” buttons for answering. The user’s answer will then be logged to the console. It’s a simple example but enough to get you started with creating and managing Aurelia dialogs.

Let’s start by creating a new folder within our src directory named ‘dialog-demo’. We’re going to need to add four files to this folder.
• info-dialog.ts: The view model for our custom ‘Personal Information’ dialog

• info-dialog.html: Where we will design our custom dialog

• dialog-demo.ts: The view-model for the page that will host our shiny new popup dialog

• dialog-demo.html: Will  just contain a button that will trigger the popup

Finally we make the required additions to the configureRouter method of the App class in app.ts to add our new demo page to the router navigation.

{ route: 'dialog-demo', name: 'dialog-demo', moduleId: './dialog-demo/dialog-demo', nav: true, title: 'Dialog Demo' }

Note: At the time of this writing there is still a bug in Aurelia Dialog’s code that prevents the popup dialog from closing when the user clicks outside the box.

You can view the whole repository here for more Aurelia demos