Dynamic component creation

[Chris Derossi]

I have a <div> with contenteditable=true and I'd like to use components inside this div to give some of the contents specific behaviors. Essentially these components are <span>s with some data binding and css styling.

I need to be able to create these components, at any location within the div, based on server and user activity. I can't just put the <my-component....> tag in the innerHTML. I've looked at DynamicComponentLoader which *almost* looks like it will do the right thing, but it needs a template variable to mark the spot to place the component. But I can't find a way to insert a template variable, either. Putting <span #marker></span> in the innterHTML doesn't work.

My next step is to start looking at the TemplateCompiler, but I'm starting to feel like I'm fighting Angular instead of leveraging it.

Is there a pattern for how code can easily insert Angular components into the DOM, dynamically at runtime?

[Sander Elias]

Hi Chris,

What you want is at least tricky. If you enable contenteditable, basically you put the content under direct control of the browser. The internal state of the element is kind of unknown, until you are done editing. This makes your request a much more challenging. It's not impossible tough, but be prepared to deal with a bunch of edge-cases. 

What you need to do when you want to insert a 'live' angular component is to put the focus away from the editable, compile the new element before adding it to the dom. Once that is done add it to your div at the location you need it. and as last, move the focus back.

Hope this helps you a bit forward!

Regards

Sander

[Chris Derossi]

Sander,

Thanks!

I shouldn't have even mentioned contenteditable. It muddies the water, and it turns out I can do what I need in a normal div that is not editable.

So if I simplify the question to how can I insert a 'live' angular component into an arbitrary spot of an existing div, that should be more on point.

I would appreciate any pointers on what is required to "compile the new element" and how to add it to the DOM while keeping the linkage between the component instance and the element intact.

Chris

[Sander Elias]

Hi Chris,

Ok, now I need to know for real, version 1 or 2? ;)

Regards

Sander

[Chris Derossi]

Heh, good question.

I tagged the post Angular2, but that's probably not obvious enough. Definitely version 2.

Chris

[Sander Elias]

Hi Chris,

Yes, now you mention it it's perfectly obvious :)

Ok, there is no direct way(yet!). You have to use the DynamicComponentLoader for now. This SO question will show you how you can do it now. If you are patient, there will be an easier way, once the new HTML parser is fully integrated.

Regards

Sander

[Chris Derossi]

Hi Sander,

Thanks for the SO pointer; that's very useful!

For my immediate need, I felt like I was fighting Angular to do what I wanted rather than being helped by Angular. So I punted and just went back to "non-live" elements which I operate on with external code messing with the DOM and the innerHTML. Not very object-oriented of me, I know.

The ability to programmatically cause the insertion of dynamic "live" elements is going to be important, in my opinion. I'm very glad to hear that it's going to be possible with the integrated HTML parser.

Chris