V2 Dialog Example

Help Requests
1

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.

2

Rendering a customElement on Dialog is fairly straightforward:

openModal = () => {
    this.dialogService.open({
      component: () => MyModalContent,
      model: {data:...},
    });
  };

Do I misunderstand the question?

3

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.

4

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;
        
    activate(params){
        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
<div>
    <header>
        A Dialog
    </header>
    <main>
        <au-compose component.bind="component" model.bind="model" component.ref= "componentViewModel"></au-compose>
    </main>
    <footer>
        <button click.trigger="this.$dialog.cancel">Cancel</button>
        <button repeat.for="button of buttons" click.trigger="buttonClick($index)">${button.text}</button>
    </footer>
</div>

and can be used like this

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