Angular 4 - Dynamic html and Dynamic component with AOT

[Arnaud Deman]

Hi,

I am tryning to merge dynamic HTML and dynamic components and I was not able to found how to do that or if it is possible or not.

I know how to create dynamic html, .e.g. <div [innerHtml]='value'></div>
And I am able to create dynamic component too with the ComponentResolverFactory service.

..but I could not find how to combine dynamic html with dynamic component.

For instance I would like to do something like :
<div class="foo">
   <dynamic-component [context]='initialisationValues'></dynamic-component>
<div>

My problem is due to the fact that the html is around the dynamic component (open tag before the component, and closing tag after).
I would like to inject the component after the html, inside it, or to inject the html around the component after its creation.

Both HTML and dynamic component definition are stored in a database.

I can't use the approach of compiling a dynamic template as I want to use it with aot.

Thanks in advance,
Arnaud.

[Sander Elias]

Hi Arnoud,

This article from my friend Juri, might help you along. It will provide you with most of the needed building block. This also works with AOT.

Regards

Sander

[Arnaud Deman]

Hi Sander,

Thanks for this very intersting article. I read it carefully and if I did not miss anything it is about dynamic components and dynamically choosen templates.

What I would like to do is not very far but is with dynamic html (pure html without angular directive) around a dynamic component.

In a parent template I would like to insert dynamic html (not a template) and inside a dynamic component.

I am able to inject dynamic html before and after the dymanic component with someting like this:

<div [innerHtml]='firstHTML'> </div>

   <dynamic-compoent [context]="someData"></dynamic-context>

<div [innerHtml]='secondHtml'></div>

But with that approach I am not able to produce a result like this:

<div class="foo">

 [the created instance of dynamic component]

</div>

Where the div is the dynamic html which could be replaced by something else at runtime.

I can only produce this kind of result :

<div class="foo"> (..) </div>

[the created instance of dynamic component]

Regards,

Arnaud.

[Sander Elias]

Hi Arnaud,

Well, you can use ElementRef.nativeElement. first, insert your dynamic html, once that is done you can use the native-element to traverse down the dom node to get the insertion point you need. Once you have that, you can use that to inject the dynamic created angular component.

Regrards

Sander

[Arnaud Deman]

Hi Sander,

Thank you very much for your help, it did it !

If someone else has to do something similar,  here are the main documentations I used for the implementation:

Creation of dynamic components:

Offical Angular documentation about dynamic components and the  article you mentioned.

Insertion at a specific point in the dom: 

Angular 2: Inserting capture element dynamically when creating components (dynamically)

Regards,

Arnaud.