Getting started with Aurelia Dialog
Firstly in your project folder make sure Aurelia dialog has been installed:
[code language="text"]
npm i aurelia-dialog
[/code]
Also see this following link on how to get started in creating, building, running etc a new Aurelia project:
https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/
In your src folder create the following files as a bare minimum dialog example:
dialog.html
[code language="html"]
<template>
<style>
div.div{
border: 1px solid blue;
padding: 15px;
}
</style>
<div class="div">
<div>
<h1>${title}</h1>
</div>
<div>
<p1>${message}...</p1>
</div>
<div>
<button click.delegate="ok()">OK</button>
</div>
</div>
</template>
[/code]
dialog.ts
In this example we create the dialog with three properties: title and message string and a callback action for when the OK button is clicked:
[code language="js"]
import {DialogController} from 'aurelia-dialog';
import { autoinject, inject } from 'aurelia-framework';
@autoinject
export class Dialog {
title?: string;
message?: string;
action?: (args?: any) => {};
constructor(private dialogController : DialogController) {
dialogController.settings.centerHorizontalOnly = true;
}
activate(model : any) {
this.message = model.message;
this.title = model.title;
this.action = model.action;
}
ok() : void {
this.action();
this.dialogController.ok();
}
}
[/code]
And modify the app.{html, ts} and main.ts files as follows:
app.html
[code language="html"]
<template>
<button click.delegate="openDialog()" >Open</button>
</template>
[/code]
app.ts
[code language="js"]
import { autoinject } from "aurelia-framework";
import { DialogService } from "aurelia-dialog";
import { Dialog } from "dialog";
@autoinject
export class App {
constructor(private dialogService : DialogService) {}
attached(): void {
}
openDialog() : void {
this.dialogService.open( {viewModel: Dialog,
model: {message : 'Message text...',
title: 'Title text...', action: this.action} }).then(response => {
console.log(response);
});
}
action() : void {
alert('OK button pressed');
}
}
[/code]
main.ts
[code language="js"]
import {Aurelia} from 'aurelia-framework'
import * as environment from '../config/environment.json';
import {PLATFORM} from 'aurelia-pal';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature(PLATFORM.moduleName('resources/index'));
aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');
aurelia.use.plugin(PLATFORM.moduleName('aurelia-dialog'));
if (environment.testing) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
}
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
[/code]
Do an 'au build', followed by an 'au run' and see main windows appear as follows:
On clicking Open the Aurelia dialog is launched as shown:
On clicking OK the callback is invoked, in this example the action creates an alert:
On clicking Open the Aurelia dialog is launched as shown:
On clicking OK the callback is invoked, in this example the action creates an alert:
Comments
Post a Comment