Angualr2 MyApp compoment with dynamic innerHtml/template from render engine

[Przemek Pod]

Hello,

I would like to achieve smth like:

<myApp>@RenderBody()<myApp/>

 

where RenderBody from Razor will render components tags mixed with other types of content (from CMS).

Obviously, it won’t work that way because MyApp component will ignore innerHtml after init and will show template. I have been researching this issue and there were some ideas for storing components definition form server in hidden input, or smth that I tried to call an api for components on that page etc, but nothing will work well when I have mixed content(not only components but also some content rendered with cms helpers etc). 

Is it even possible? Because I am thinking that I’m trying to hard to fit Angular2 to my requirements, tech stack and it simply doesn’t fit and I need to use smth else.

 

Any ideas, opinions?

 

Best regards.

[Sander Elias]

Hi Przemek,

You can do that, but you need to use the JIT. Not taking advantage of AOT is a pity, but if you live with that you are fine.

(just move the <myApp> inside your ServerSide template!)

Regards

Sander

[Przemek Pod]

Thank you for answering, but how JiT will help me? Because I need to make smth like that working:

<myApp>@RenderBody()<myApp/> 
which will render smth like this:
<myApp>
  <component1> <component1/>

   (... other html)
   <component2> <component2/>
<myApp/>,

 

which right now is being overwritten by myApp template and I cannot access it

or smth like

 

<myApp [html]="@RenderBody()">Loading...<myApp/> and then try putting rendered html from server to template directly, but this input is never binded that way,

so how JiT vs AoT plays with it?

Thanks

[Sander Elias]

Move <myApp> inside of the result @renderBody.

If you need dynamic templating like this, you can't use AOT. (well, not without doing some custom server things)

[Przemek Pod]

So I have smth like this, that lets say is test version of RenderBody() result:
<myApp>

<component1></component1>

</myApp>

 

where component1 in template has some sample text and myApp template is empty,

it still will not show component1 because it will always show myApp template, and template is required for component

or am I missing smth?

[Zlatko Đurić]

That sounds like angular app didn't start at all.

You also need to bootstrap the angular MyApp module somewhere. Are you doing that?
What does your index.html look like?