Dynamically load component into dynamic position

Question

UPDATED (As I understood the issue better):

I would like to show a component depending on where the user clicks (which table row), I'm using ng2-smart-table, now the problem is there is no selector to where I need to load the component dynamically. In my case its the button parent which is the row.

Each row has an open button

onOpen(event) {
 var selectedRow = event.target.closest(".ng2-smart-row");
 const newRow = document.createElement('tr');
    newRow.innerHTML = `
    <div #here></div>
  `;
selectedRow.insertAdjacentHTML('afterend', newRow.innerHTML);
}

Now while the open works, the ViewChild can't seem to find it so does the createCompoenent and throughs this.here is undefined

@ViewChild('entry', {read: ViewContainerRef}) entry:ViewContainerRef;


const openerFactory = this.componentFactoryResolver.resolveComponentFactory(OpenActivityComponent);
const component = this.here.createComponent(openerFactory);

I guess the question is, can I set the @ViewChild dynamically?

Answer 1

Took me a long time. here is Stackblitz

it is not complete and some tweaking, but covers everything in this question. And here is the main source of the answer