Aurelia Templating Engine compose

Question

I'm trying to compose component dynamically through code (not with <compose> ) and add it to the DOM from a service (similar to a popup).

From my understanding, the best way is to use the TemplatingEngine via .compose method.

I cannot find a decent documentation or small sample on how this is used exactly.

This is what I have so far

constructor(
    loggerFactory: LoggerFactory,
    private bindingEngine: BindingEngine,
    private templatingEngine: TemplatingEngine,
    private container: Container,
    private viewResources: ViewResources
) {

    const hostee = this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: SnackbarHostElement,
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });

    hostee.then(x => {
        x.attached();
    });

I'm getting no errors and .then is being triggered, however, the component doesn't seem to be rendering. Any help would be appreciated!

Answer 1

This is the final code (thanks @Fabio)

async init(): Promise<View | Controller> {
    const viewController = await this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: this.container.get(SnackbarHostElement),
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });
    viewController.attached();
    return viewController;
}

Answer 2

I just use the method like this, wishes to help you!

const View = await this.templatingEngine.compose({
    host: this.element,
    container: this.container,
    bindingContext: this.bindingContext,
    overrideContext: this.overrideContext,
    viewModel: this.container.get(CustomComponent),
    viewResources: this.viewResources,
    viewSlot: new ViewSlot(this.element, true),
});