Dynamic Components: Insert components of type X on the fly

Question

There are two things I want to achieve. Both would require a smart use of components.

First, a question about Component-binding in general: In every article I've seen, a directive-tag was used in a template, to later bind a component. However, due to my two problems, I can't put my directives in the template beforehand - Instead, I need to do so dynamically.

I have a list of "things". A "thing" is only the parent however, and it has many children - Meaning there are multiple types of things, each with different values. This made me create a Component for each thing: Each with its own template as well. However, I also want to display a list of those things. I don't know them beforehand, though: I'm fetching them from a server. I don't know their types or the amount of things before having gotten the data. I now want to list each "thing" by adding a Component of the right type each time. How would I properly add the bindings to dynamically load the components?
My users can "style" their profile by using different modals. The resulting layout is fetched from a server. Meaning that, again, I do not know the amount of modals or the type of modal beforehand. How will I now be able to include them properly?

TL;DR How do I dynamically bind components without having set up the right amount of bindings with their respective types?

You just don't, because there is no way. http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 contains a bit of code that demonstrates how to read and write values imperatively. I don't know what you mean about 2. You need to add components statically to your application. Components Angular doesn't know when you build your application can't be added. — Günter Zöchbauer, Jan 13 '17 at 21:19
@GünterZöchbauer Thanks for the reply. However, how would one then go about solving the problem I currently have then? About 2: I'll edit in a minute to make it clearer. Also: It's not that Angular doesn't *know* the components I want to add - I do define them beforehand. I just don't know *which* components to use beforehand. So, basically: I defined components X, Y, Z. Server now tells me "Put X, Z, X, X, Y, Z, Y in the list in that order with values I'll give you". — user2065501, Jan 13 '17 at 21:28
That's what my answer linked to in my first comment demonstrates. — Günter Zöchbauer, Jan 14 '17 at 10:10

Sumama Waheed · Accepted Answer · 2017-01-13T21:49:33.557

Here is one thing you can do when component info is coming from the server:

You still have to put all of your components in the parent template, but you only show what the server returns:

<div *ngFor="let dynamic of fromServer" [ngSwitch]="dynamic .id">
      <thing-a *ngSwitchCase="'thinga'" [data]="dynamic"></thing-a>
      <thing-b *ngSwitchCase="'thingb'" [data]="dynamic"></thing-b>
      <thing-c *ngSwitchCase="'thingc'" [data]="dynamic"></thing-c>
      <thing-d *ngSwitchCase="'thingd'" [data]="dynamic"></thing-d>
      <thing-e *ngSwitchCase="'thinge'" [data]="dynamic"></thing-e>
      <thing-f *ngSwitchCase="'thingf'" [data]="dynamic"></thing-f>
</div>

So if the server returns:

[
   { id : "thinga" }
   { id : "thingd" }
   { id : "thingf" }

]

Then only these 3 will be shown.

You can also dynamically sort the components based on how which order the server returns the data

Edit:

If the server returns thinga 3 times, it will be shown 3 times.

Edit 2: Example:

[
   { id : "thinga", title: "Yes"}
   { id : "thinga", title: "No" }
   { id : "thinga", title: "Maybe" }
]

Each thinga component will get its own data

Thank you very much for your answer. In case a thinga is shown 3 times, will it be shown with the different data, too? If so, this probably solves all of my problems in a super easy way! — user2065501, Jan 13 '17 at 21:47
Awesome, thank you so much. Exactly what I was looking for, and it's super simple too. I'll try it out soon. — user2065501, Jan 13 '17 at 22:02

Dynamic Components: Insert components of type X on the fly

1 Answers1