- Aurelia - Best Practices
- Aurelia - Community
- Aurelia - Debugging
- Aurelia - Bundling
- Aurelia - Tools
- Aurelia - Localization
- Aurelia - Dialog
- Aurelia - Animations
- Aurelia - History
- Aurelia - Routing
- Aurelia - Refs
- Aurelia - HTTP
- Aurelia - Forms
- Aurelia - Event Aggregator
- Aurelia - Events
- Aurelia - Converters
- Aurelia - Binding Behavior
- Aurelia - Data Binding
- Aurelia - Plugins
- Aurelia - Configuration
- Aurelia - Dependency Injections
- Aurelia - Custom Elements
- Aurelia - Component Lifecycle
- Aurelia - Components
- Aurelia - First Application
- Aurelia - Environment Setup
- Aurelia - Overview
- Aurelia - Home
Aurelia Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Aurepa - Dialog
Aurepa 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:UsersusernameDesktopaurepaApp>jspm install aurepa-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 aurepa-dialog plugin.
main.js
export function configure(aurepa) { aurepa.use .standardConfiguration() .developmentLogging() .plugin( aurepa-dialog ); aurepa.start().then(() => aurepa.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:UsersusernameDesktopaurepaAppsrccomponents>mkdir modal
In this folder, we will create two new files. These files will represent view and view-model for our modal.
C:UsersusernameDesktopaurepaAppsrccomponentsmodal>touch my-modal.html C:UsersusernameDesktopaurepaAppsrccomponentsmodal>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 handpng modal specific functionapties. In the following example, we are using it to centrapze a modal horizontally.
my-modal.js
import {inject} from aurepa-framework ; import {DialogController} from aurepa-dialog ; @inject(DialogController) 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 pke this. The buttons when cpcked will open or close the modal.
my-modal.html
<template> <ai-dialog> <ai-dialog-body> <h2>${message}</h2> </ai-dialog-body> <ai-dialog-footer> <button cpck.trigger = "controller.cancel()">Cancel</button> <button cpck.trigger = "controller.ok(message)">Ok</button> </ai-dialog-footer> </ai-dialog> </template>
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.
app.js
import {DialogService} from aurepa-dialog ; import {inject} from aurepa-framework ; import {Prompt} from ./components/modal/my-modal ; @inject(DialogService) export class App { constructor(dialogService) { this.dialogService = dialogService; } openModal() { this.dialogService.open( {viewModel: Prompt, model: Are you sure? }).then(response => { console.log(response); if (!response.wasCancelled) { console.log( OK ); } else { console.log( cancelled ); } console.log(response.output); }); } };
Finally, we will create a button so we can call openModal function.
app.html
<template> <button cpck.trigger = "openModal()">OPEN MODAL</button> <template>
If we run the app, we can cpck the OPEN MODAL button to trigger a new modal window.
![Aurepa Dialog Modal](/aurepa/images/aurepa-dialog-modal.jpg)