0

I'm hoping someone familiar with ng2's dynamic component and templates, will be able to help me with an unusual problem. I want to know how to render dynamic created components using ONLY AND EXCLUSIVELY TEMPLATE markup. For instance:

I created all my dynamic components (lets say FooBarComponent) in app-editor.component using Angular's ComponentResolver.resolveComponent. So I have:

app-editor.component.ts

public instances : Array<ComponentFactory>;

Ok, so far so good. It works the way I want. All instances of components are working as expected. Each one's model set properly.

Now I need to display, lets say, two of these components instances in my view. What should I do?

app-editor.template.ts

<div>
    <foo-bar instance-index="2"></foo-bar>
    <foo-bar instance-index="15"></foo-bar>
</div>

Remember: I would like to wire the instances to the view using exclusively template markup. I know I could be using @ViewChild in the app-editor.component and set a view variable in app-editor.template then call some loadIntoLocation | loadAsRoot methods to insert component to the DOM, but to me, it sounds like jQuery way of do things, isn't?

mowses
  • 11
  • 1
  • 1
  • 3
  • `app-editor is` your container which dynamically loads `FooBarComponent`, then why you have `foo-bar` explicitly added in the app-editor template. shouldn't it be a generic container? Can you add more detail to the question? – Madhu Ranjan Aug 03 '16 at 03:05
  • You can use a wrapper component like shown in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 to declaratively add dynamic components. – Günter Zöchbauer Aug 03 '16 at 05:14

0 Answers0