Insert Custom Element into DOM dynamically from another View Model

Help Requests
1

Hi all,

I am trying to build a custom component that allows me to insert a Custom Element into the DOM based on user interaction. This needs to be achieved and conducted within a class and not in the HTML using compose.

I’ve been able to insert HTML templates into the DOM using the loadViewFactory method below.

@autoinject
export class MyClass {

constructor(private container: Container, private viewEngine: ViewEngine) { }

async createView(): Promise<void> {
  let factory = await this.viewEngine.loadViewFactory('path/to/template.html');

  this.view = factory.create(this.container.createChild());
  this.view.bind(this);

  this.view.appendNodesTo(document.body);
  this.view.attached();
  }
}

The problem I’m having here is I can only load the HTML and not the whole Custom Element with View Model.

Is this even possible?

2

It’s possible. You can check @fkleuver work at https://github.com/aurelia-contrib/aurelia-dynamic-html and apply similar method.