Design decision for Angular2 app with dynamically loaded components

Question

My app consist of a start page where a user selects item from a list based on a given user earlier saved preferences which then updates the view and shows the selected functionality/page.

These pages have different configurations in the sense that they include different sub-components.

I could create a new component for any given configuration (combination of sub-components) when a new need is expressed and make the list item point to that component, but this approach would potentially require a lot of manual work. The best way, in my opinion, would be that the list item model (which comes from the backend.service and is based on user preferences) keeps an internal array with IDs for their sub-components that should load when the item in the list is selected.

All the tutorials and guides shows only how to load a predefined type of component and a predefined number of components, but what if i sometimes need to load 3 components and sometimes 6 components and also different types of components and in different order in the template? How could i dynamically change the main.component.html(which holds the dynamically created set of sub-components) to load the correct templates and do you agree that this is a good solution for this problem?

Answer 1

I so happen to work on a project where we have the same needs

What we ended up doing is, we created a component which will we call blocks-provider. It would be responsible for dynamically loading the components, by working with a service that maintains a list of all the components ( Using their identifier and class ) This list will have to be maintained manually, but its not that much work.

This would help us render components in any order and anywhere. Because blocks-provider has an id as @Input we give it the selector of the component and it would fetch the component from the service discussed above. Once done it would assign it its @Input's and eventually it would render the component through an ng-template and ViewChild.

This is the easy part which is explained in great detail here

When you have that structure in place, you could loop through the data from the backend with the users preferences in combination with the blocks-provider

TLDR