Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm using angular 2.1 and want to dynamically import a template witch is a string from the backend.

I already use ComponentFactoryResolver to load dynamically my parent container, now I need to create his content witch can look like this:

<my-component>
    <my-nested-component>
    <my-nested-component>
<my-component>

Components are already in my applications, I just need to create them from the template string and load them into the parent.

If create components from string template is not possible, is it possible to do it with lazy loading components ? I see lazy loading with the router but here I under a route and want lazy loading on some composent only

Is it possible ? I know it was possible with angular 2 beta or RC by doing this http://stackoverflow.com/a/39044539/541867

PS: if you want to know why I need to have a template as string coming from the backend it's because the UI of some component is coming from external plugin, they just use a set of component available is the application but can do the layout they want so I can't have it under a @Component template.

EDIT: here is a gist of a first string template I try to load: https://gist.github.com/jaumard/918dfc573b01263467e89adc8ad86f77

share|improve this question
    
I'm not sure if I got it right, but you can store a string in variable and use *ngIf when there is no milions of them... what I mean is <my-component><my nested-component *ngIf="string == 'nested'"></my-component> OR if you have a lot of these components you can store them in an array and use *ngFor. I know it might not be professional, but it worked when I was working on something similar. – Dawid Zbiński Nov 20 '16 at 10:24
    
I added a gist of what my first template string look like (but there will be much more and much different ones in the future) I don't think it will work the way you said. Am I wrong ? – jaumard Nov 20 '16 at 11:14

If you inject your template in the innerHtml attribute and use the DomSanitizer, it will translate it just like a component, giving you the lazy load effect.

<div [innerHTML]="myComponentsTemplate"></div>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.