Create dynamic custom components and add it to an array

I would do it conceptually the same way as what @rapropos linked. Say you have component1 through component5. Then you also create componentSelector, a component that has the other 5 components in its template, but only shows the correct component to the user, using something like ngIf or ngSwitch.

<componentSelector [componentData]="data" [componentType]="type"></componentSelector>
To make use of AOT compiling, you should know how many components there are ahead of time, and what they are. So I’d create an enum ComponentType indexing those 5 components, and that would be the variable type I would pass to component Selector. If your data structures are discordant, you could even have five input fields, component1Data through component5Data, and you only use the data field appropriate for the component type.

1 Like