M
M
Maxim Ivanov2017-05-15 13:40:17
Angular
Maxim Ivanov, 2017-05-15 13:40:17

How to create dynamic components in Angular 2+?

Maybe I don't understand something, but I'm in a stupor guys. Now a task has come from the customer. Allegedly, the user interface should be easy to configure, that is, the structure comes from the server:
1st option

{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "process-component"},
                {"l6" : "order-component"},
                {"l12": "footer-component"}
            ]
};

the analyst can change it and get:
{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "search-component"},
                {"l12": "footer-component"}
            ]
};

That is, at any time, information about the name of the component that should be displayed in the UI comes from the server. And Angular itself should resolve it. But I can't understand, in the current version of the framework there are a lot of opportunities to create components on the fly, but everywhere we must declare in the AppModule all the components that will be compiled.
But that's stupid! For example, I have 300 components written, the analyst in the database indicated the components that should be displayed in the UI, for example 5, but what should I do, import all 300 components?
I thought that everything is really simple with JS, like the server sent us a structure, and Angular already sees the names of the components from the structure and asynchronously loads the necessary *-component.js file with its implementation, template, etc. Or I don’t understand something, and I can’t understand where this *-component.js will come from if it needs to be built in advance through webpack (translating from typescript to javascript).
Please help me, how can I accomplish my task!?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander Trakhimenok, 2017-05-15
@astec

I won’t answer specifically, but what you need is exactly implemented in the Ionic Framework (c 3.2.0) in lazy loading.
Pages are lazy loaded by string class name. Each page has its own module. You can see the source.
I think something similar should be in a standard router. This is how https://DebtsTracker.io works
for me .

K
Kostya Gorozhanov, 2017-05-16
@kgorozhanov

Look here)
https://angular.io/docs/ts/latest/cookbook/dynamic...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question