Aurelia - Dialog

Aurelia offers a way to implement dialog (modal) window. In this chapter, we will show you how to use it.

Step 1 - Install a Dialog Plugin

Dialog plugin can be installed from the command prompt window.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

For this plugin to work, we need to use manual bootstrapping. We covered this in the Configuration chapter. Inside main.js file, we need to add the aurelia-dialog plugin.


export function configure(aurelia) {

   aurelia.start().then(() => aurelia.setRoot());

Step 2 - Create Folders and Files

First, we will make a new directory called modal. Let's place it inside the components folder. Open the command prompt and run the following code.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

In this folder, we will create two new files. These files will represent view and view-model for our modal.

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

Step 3 - Create a Modal

First, let's add view-model code. We need to import and inject dialog-controller. This controller is used for handling modal specific functionalities. In the following example, we are using it to centralize a modal horizontally.


import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';


export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   activate(message) {
      this.message = message;

The view code will look like this. The buttons when clicked will open or close the modal.



         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>

Step 4 - Trigger a Modal

The last step is a function for triggering our modal. We need to import and inject DialogService. This service has method open, where we can pass view-model from my-modal file and model, so we can dynamically bind the data.


import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';


export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   openModal() { {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         if (!response.wasCancelled) {
         } else {

Finally, we will create a button so we can call openModal function.


   <button click.trigger = "openModal()">OPEN MODAL</button>

If we run the app, we can click the OPEN MODAL button to trigger a new modal window.

Aurelia Dialog Modal
Kickstart Your Career

Get certified by completing the course

Get Started