V2 Dialog Example

Does anyone have an example use of the Aurelia 2 Dialog they can share? I want to use a dialog to host a component that may also be used elsewhere and therefore doesn’t contain standard dialog controls e.g ok and / or cancel buttons.

Rendering a customElement on Dialog is fairly straightforward:

openModal = () => {
      component: () => MyModalContent,
      model: {data:...},

Do I misunderstand the question?

That much I understand and I that works as expected. Dialogs usually have some buttons associated with them (ok / cancel / close etc ) and if I want to use a component both in a page and a dialog, I wouldn’t want these buttons in my component, they are specifically for use with a dialog. I’m asking whether anyone else has done something similar.

I’ve cobbled something together. I created a DialogHost component which looks like this:

// dialog-host.ts
import { IDialogController } from '@aurelia/dialog';

export class DialogHost {
    $dialog: IDialogController;
    model: any;
    component: any;
    buttons: any;

    componentViewModel: any;
        const {component, model, buttons} = params;
        this.component = component;
        this.model = model;
        this.buttons = buttons;

    async buttonClick(buttonIndex){
        const buttonDefinition = this.buttons[buttonIndex];
        buttonDefinition.action && await buttonDefinition.action(this.componentViewModel, this.$dialog);

// dialog-host.html
        A Dialog
        <au-compose component.bind="component" model.bind="model" component.ref= "componentViewModel"></au-compose>
        <button click.trigger="this.$dialog.cancel">Cancel</button>
        <button repeat.for="button of buttons" click.trigger="buttonClick($index)">${button.text}</button>

and can be used like this

        const { dialog } = await this.dialogService
            component: () => DialogHost,
            model: {
                component: SomeComponent,
                model: someComponentModel,
                buttons: [
                    { text: "Ok",
                       action: (someComponentViewModel, dialog) => {
                          const data = someComponentViewModel.getData();