Get component as class

Help Requests
1

I’m using a thrid party grid component. It lets me provide a “component” to use for rendering the header cells. That “component” is a class with a certain interface which handles initialization and creation of the DOM element.
I’d like to use an Aurelia component for that instead of manually creating DOM elements and setting inner HTML. Is that possible? I created such a component: a class that implements the required interface plus a template.
When I use the DI container to get it, first of all I get an instance and second, the DOM element is not a new element according to the template, but the root element of the app. Also tried registering it as global resource, but no idea how to continue from there.

Some code in order to illustrate what is done with the component:

const component = new MyComponent();
component.initialize({...});
const element: HTMLElement = component.getElement();
parent.appendChild(element);
2

What you described sounds achievable, but it’s a bit confusing with the part “getting the element via DI”, because if you want an element, you can easily create one from document.createElement? That new element can be appended anywhere to application.

3

I was just trying some Aurelia mechanics in order to get the component. DI was just one of them, forget about it. Sure, I can make createElement. But what do I put in there? I’d really like to use a template and use all the Aurelia magic with binding and refs etc. instead of creating an element and setting its innerHTML.

4

From what you said, I guess here is a similar question https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia

@fkleuver has created a custom element to help make this easier, you can check it out here https://github.com/aurelia-contrib/aurelia-dynamic-html

5

I’ve seen the dynamic-html component before. Isn’t that he exact opposite of what I want to do? Both links are about having a template in a variable and compiling that, right? What I have is a regular custom element that I’d like to use in code, not in a template.

The component:

@inlineView('<template>some stuff here</template>')
export class MyComponent {}

How I want to use it:

const MyComponentFactory = ... // somehow get it, that's the part I'm asking here
const instance = new MyComponentFactory();
instance.initialize({...});
parentElement.appendChild(instance.getElement());
6

Now it’s clear what you want to achieve. I wouldn’t say it’s not possible, but this usage could make one curious, I can put together something to demonstrate it, though you will still need a container. May I know why you want to use it in this way?

7

I want to use it like that because that’s the required interface of the third party grid component I’m using. It expects a class which it can instantiate for each column. Each instance would then create an element which it can attach in the right places.

8

view-model.ref will help with getting the element’s class