<commit_before>---
name: "Dialog: Basics"
description: The basics of the dialog plugin for Aurelia.
author: <NAME> (http://patrickwalters.net)
---

## Introduction

This article covers the dialog plugin for Aurelia.  This plugin is created for showing dialogs (sometimes referred to as modals) in your application.  The plugin supports the use of dynamic content for all aspects and is easily configurable / overridable.


## Installing The Plugin

1. In your **JSPM**-based project install the plugin via `jspm` with following command

```Shell
jspm install aurelia-dialog
```

If you use **Webpack**, install the plugin with the following command

```Shell
npm install aurelia-dialog --save
```

If you use the **Aurelia CLI**, install the plugin with the following command

```Shell
npm install aurelia-dialog --save
```

and then add a section in your `aurelia.json` for the plugin

<code-listing heading="aurelia.json">
  <source-code lang="ES 2015">
  {
    dependencies: [
    //...
      {
        "name": "aurelia-dialog",
        "path": "../node_modules/aurelia-dialog/dist/amd",
        "main": "aurelia-dialog"
      }
    //...
    ]
  }
  </source-code>
</code-listing>

If you use TypeScript, install the plugin's typings with the following command

```Shell
typings install github:aurelia/dialog --save
```

2. Make sure you use [manual bootstrapping](http://aurelia.io/docs#startup-and-configuration). In order to do so open your `index.html` and locate the element with the attribute aurelia-app. Change it to look like this:

<code-listing heading="index.html">
  <source-code lang="HTML">
  <body aurelia-app="main">...</body>
  </source-code>
</code-listing>

3. Create (if you haven't already) a file `main.js` in your `src` folder with following content:

<code-listing heading="main.js">
  <source-code lang="ES 2015">
  import {PLATFORM} from 'aurelia-pal';
  export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin(PLATFORM.moduleName('aurelia-dialog'));

    aurelia.start().then(a => a.setRoot());<commit_msg>fix(doc): correct link from dialog to bootstraping<commit_after>---
name: "Dialog: Basics"
description: The basics of the dialog plugin for Aurelia.
author: <NAME> (http://patrickwalters.net)
---

## Introduction

This article covers the dialog plugin for Aurelia.  This plugin is created for showing dialogs (sometimes referred to as modals) in your application.  The plugin supports the use of dynamic content for all aspects and is easily configurable / overridable.


## Installing The Plugin

1. In your **JSPM**-based project install the plugin via `jspm` with following command

```Shell
jspm install aurelia-dialog
```

If you use **Webpack**, install the plugin with the following command

```Shell
npm install aurelia-dialog --save
```

If you use the **Aurelia CLI**, install the plugin with the following command

```Shell
npm install aurelia-dialog --save
```

and then add a section in your `aurelia.json` for the plugin

<code-listing heading="aurelia.json">
  <source-code lang="ES 2015">
  {
    dependencies: [
    //...
      {
        "name": "aurelia-dialog",
        "path": "../node_modules/aurelia-dialog/dist/amd",
        "main": "aurelia-dialog"
      }
    //...
    ]
  }
  </source-code>
</code-listing>

If you use TypeScript, install the plugin's typings with the following command

```Shell
typings install github:aurelia/dialog --save
```

2. Make sure you use [manual bootstrapping](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#manual-bootstrapping). In order to do so open your `index.html` and locate the element with the attribute aurelia-app. Change it to look like this:

<code-listing heading="index.html">
  <source-code lang="HTML">
  <body aurelia-app="main">...</body>
  </source-code>
</code-listing>

3. Create (if you haven't already) a file `main.js` in your `src` folder with following content:

<code-listing heading="main.js">
  <source-code lang="ES 2015">
  import {PLATFORM} from 'aurelia-pal';
  export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin(PLATFORM.moduleName('aurelia-dialog'));

    aurelia.start().then(a => a.setRoot());
{'fraction_non_alphanumeric': 0.12747611279422047, 'fraction_numerical': 0.005127010020974132, 'mean_word_length': 3.711306256860593, 'pattern_counts': {'":': 6, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '345515', 'n_tokens_mistral': 1367, 'n_tokens_neox': 1296, 'n_words': 451}