Getting the Aurelia-dialog plugin

If you are using JSPM manager, type the following command:

jspm install aurelia-dialog

Else, for Webpack / Aurelia CLI users, use the known npm install command:

  npm install aurelia-dialog --save

Remember to save this dependency into your project dependencies section. It's very important, because it will be used in the final application build.

Now, let's tell our application that we have a new plugin. Like other plugins seen earlier, open your Aurelia configuration file (aurelia.json) and add a new plugin section:

{
    dependencies: [
    // Some content here
      {
        "name": "aurelia-dialog",
        "path": "../node_modules/aurelia-dialog/dist/amd",
        "main": "aurelia-dialog"
      }
    // Some content here too
    ]
  }

We have already configured our index.html file to use manual bootstrapping; if not, just ensure that it has the <body> element with the aurelia-app="main" tag inside:

<body aurelia-app="main">
</body>

In your application config file (main.js), add a new plugin() entry:

export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('aurelia-dialog'); // <<-- Add this plugin!

Also, if you want to add a more customized behavior to your modal, you can implement some configuration inside this plugin() pipe. Optionally, you can configure the aurelia-dialog plugin as follows:

.plugin(PLATFORM.moduleName('aurelia-dialog'), config => { // <<-- PLATFORM.moduleName is mandatory if you are using webpack
        config.useDefaults();
        config.settings.lock = true;
        config.settings.centerHorizontalOnly = false;
        config.settings.startingZIndex = 5;
        config.settings.keyboard = true;
});

You are ready! Now, it's time to listen to our plugin!

Table of Contents for Getting the Aurelia-dialog plugin

Create new playlist

Sign In

Sign Up

Table of Contents for
Getting the Aurelia-dialog plugin