# Outcome Recipes
## 1. Simple confirmation dialog that resolves a boolean
**Goal:** Ask the user to confirm a destructive action and return `true` or `false` without additional glue code.
### Steps
1. Create the dialog view-model that exposes a message and resolves when buttons are clicked:
```typescript
import { IDialogController } from '@aurelia/dialog';
export class ConfirmDialog {
constructor(private readonly controller: IDialogController) {}
activate(model: { message: string }) {
this.message = model.message;
}
approve() {
this.controller.ok(true);
}
cancel() {
this.controller.cancel(false);
}
}
```
2. Invoke the dialog from any service or component:
```typescript
import { IDialogService } from '@aurelia/dialog';
import { resolve } from '@aurelia/kernel';
export class TodoList {
private readonly dialogs = resolve(IDialogService);
async deleteItem(item: Todo) {
const { wasCancelled } = await this.dialogs.open({
component: () => import('./confirm-dialog'),
model: { message: `Delete ${item.title}?` },
});
if (!wasCancelled) {
await api.delete(item.id);
}
}
}
```
### Checklist
* The `open` call resolves with `wasCancelled` set correctly.
* Keyboard shortcuts (Enter/Escape) map to `ok` and `cancel` automatically.
* The caller awaits the promise and branches on `wasCancelled` without extra ceremony.
## 2. Multi-step wizard inside a dialog
**Goal:** Guide users through several steps (for example, shipping and billing) while keeping the dialog open and showing a progress indicator.
### Steps
1. Create a parent wizard component that tracks the current step and exposes `next()` and `previous()` methods.
2. Each step is a child component registered as dependencies of the wizard and conditionally rendered in the dialog template.
3. Use the dialog model to pass initial data and return the final payload via `controller.ok(finalState)`.
```html
${step.title}
```
### Checklist
* Navigation buttons enable or disable appropriately.
* The final call to `controller.ok` returns all collected state to the opener.
* Dismissing the dialog mid-process triggers `controller.cancel`, so the opener can discard partial data.
## 3. Guard dialog close until async work finishes
**Goal:** Prevent users from closing a dialog while a save operation is in progress, even if they click outside or press Escape.
### Steps
1. Implement the `canDeactivate` hook on your dialog component to block closing while saving.
2. Return `false` from `canDeactivate` to prevent the dialog from closing.
```typescript
import { IDialogController, IDialogComponentCanDeactivate, DialogCloseResult } from '@aurelia/dialog';
import { resolve } from 'aurelia';
export class EditProfileDialog implements IDialogComponentCanDeactivate {
saving = false;
private controller = resolve(IDialogController);
// Prevent closing while save is in progress
canDeactivate(result: DialogCloseResult): boolean {
return !this.saving;
}
async save() {
this.saving = true;
try {
await api.saveProfile(this.model);
this.controller.ok(this.model);
} catch (err) {
notifications.error('Save failed');
} finally {
this.saving = false;
}
}
}
```
### Checklist
* Clicking the backdrop or pressing Escape does nothing while `saving` is true.
* Once the save finishes, the dialog can be closed normally.
* The caller receives either `ok` with the payload or `cancel` after an explicit user action.
## 4. Slide-in drawer using the Standard renderer
**Goal:** Use the `