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
1 | 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:
| import 'bootstrap'; | |
| import {Aurelia} from 'aurelia-framework'; | |
| import config from './auth/auth-config'; | |
| export function configure(aurelia: Aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-dialog'); | |
| aurelia.start().then(() => aurelia.setRoot()); | |
| } |
by 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
| import {autoinject} from 'aurelia-framework'; | |
| import {DialogController} from 'aurelia-dialog'; | |
| import {UserInfo} from '../user-info/user-info'; | |
| @autoinject | |
| export class InfoDialog{ | |
| constructor(private controller: DialogController){ | |
| } | |
| //All of the parameters that we passed to the dialog are available through the model | |
| activate(model){ | |
| this.info = model; | |
| } | |
| //When the user clicks on the 'Yes' button the controller closes the dialog | |
| //and returns a promise that when resolved, it wil give us a response with a .wasCancelled property set to false and | |
| //an .output property set to this.info | |
| yes(): void { | |
| this.controller.ok(this.info); | |
| } | |
| //When the user clicks on the 'No' button the controller closes the dialog box | |
| //and sets the response's .wasCancelled property to true | |
| no(): void{ | |
| this.controller.cancel(); | |
| } | |
| info: UserInfo; | |
| } |
• info-dialog.html: Where we will design our custom dialog
| <template> | |
| <ai-dialog> | |
| <ai-dialog-body> | |
| <div class="text-center"> | |
| <div class="row"> | |
| <strong>First Name: </strong> ${info.firstName} | |
| </div> | |
| <div class="row"> | |
| <strong>Last Name: </strong> ${info.lastName} | |
| </div> | |
| <div class="row"> | |
| <strong>Email: </strong> ${info.email} | |
| </div> | |
| <div class="row"> | |
| <strong>City: </strong> ${info.city} | |
| </div> | |
| <div class="row"> | |
| <strong>Country: </strong> ${info.country} | |
| </div> | |
| <div class="row"> | |
| <h4>Is this information correct?</h4> | |
| </div> | |
| </div> | |
| </ai-dialog-body> | |
| <ai-dialog-footer> | |
| <button class="btn btn-primary" click.trigger="yes()">Yes</button> | |
| <button class="btn btn-primary" click.trigger="no()">No</button> | |
| </ai-dialog-footer> | |
| </ai-dialog> | |
| </template> |
• dialog-demo.ts: The view-model for the page that will host our shiny new popup dialog
| import {autoinject} from 'aurelia-framework'; | |
| import {DialogService} from 'aurelia-dialog'; | |
| import {UserInfo} from '../user-info/user-info'; | |
| import {InfoDialog} from './info-dialog'; | |
| @autoinject | |
| export class DialogDemo{ | |
| constructor(public userInfo: UserInfo, private dialogService: DialogService){ | |
| } | |
| open(): void{ | |
| this.dialogService.open({ | |
| viewModel: InfoDialog, | |
| model: this.userInfo | |
| }).then(response => { | |
| if(response.wasCancelled){ | |
| console.log("The information is invalid"); | |
| } | |
| else{ | |
| console.log("The information is valid"); | |
| } | |
| }); | |
| } | |
| } |
• dialog-demo.html: Will just contain a button that will trigger the popup
| <template> | |
| <div class="col-md-2"></div> | |
| <div class="col-md-8"> | |
| <button class="btn btn-primary btn-block" click.trigger="open()">Show Information</button> | |
| </div> | |
| </template> |
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.
1 | { 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