Let's create a UserRegister modal for our application. This will look something like this:

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

@inject(DialogController)
export class UserForm {
  user = { firstName: '',    
           lastName: '',
           age: 0
 };

  activate(user){
    user = user;
  }
}

This is very simple by now. Remember that this component will be the modal itself. The modals are displayed over the main content, so now we will configure this behavior into our Home component. Pay attention to this section; it's a little tricky, but we are sure that you will find it easy to implement.

First, let's import DialogService from our recently imported aurelia-dialog plugin:

import {DialogService} from 'aurelia-dialog';

Also, let's import our recently created UserForm component:

import {UserForm} from './user-form';

Now, let's configure the dialog behavior:

export class HomeComponent {
  static inject = [DialogService]; // <<-- Same as use the @inject annotation

  user = { firstName: 'Diego', lastName: 'Arguelles', age: 26 }

  constructor(dialogService) {
    this.dialogService = dialogService; <<-- We need to inject the service into our component
  }

  openModal(){
    this.dialogService.open({ viewModel: UserForm, model: this.user}).whenClosed(response => {
      if (!response.wasCancelled) {
        console.log('good - ', response.output);
      } else {
        console.log('bad');
      }
    });
  }
}

In addition, the <template> file needs to contain one <button> to trigger the openModal() method:

<template>
   <button click.trigger = "openModal()">New user</button>
<template>

Let's explain the openModal() method:

First, we need to open the modal. We will set some default values for our recently created user object. This method will return a promise object. Why? So simple, with this promise, we will be able to handle any event triggered inside the modal:

this.dialogService.open({ viewModel: UserForm, model: this.user}).then();

Inside the then() statement, our promise will be defined in such a way:

response => {
    //We will get the response value returned by the modal
    if (!response.wasCancelled) { 
        console.log('All OK - ', response.output); //Should output the recently created user info
    } else { 
        console.log('Something get wrong!'); 
    } console.log(response.output);
}

Now, let's look at our <template> file:

<template>
   <ux-dialog>
      <ai-dialog-body>
         <h2>User registration</h2>
         <input placeholder="User name" model.bind="user.firstName" />
         <input placeholder="User last name" model.bind="user.lastName" />
         <input placeholder="User age" model.bind="user.age" /> 
      </ai-dialog-body> 
      <ai-dialog-footer> 
         <button click.trigger = "controller.cancel()">Cancel</button> 
         <button click.trigger = "controller.ok(message)">Ok</button> 
      </ai-dialog-footer> 
   </ux-dialog> 
</template>

Of course, we can customize how our modal is displayed. For example, bootstrap by default adds 50% opacity in the modal background. To get the same result, include this CSS class in an existing or new style sheet. Depending on which CSS preprocessor you are using, don't forget to import it if necessary:

ai-dialog-overlay.active {
      background-color: black;
      opacity: .5;
}

Now, you are ready to add a more user-friendly behavior to your application with the use of dynamic dialogs.