V2 Dialog Example

Help Requests
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);
                       } 
                    }
                ]
            }
        })