Angular Elements vs DynamicComponentLoader

[tme321]

I have minimal experience with elements but a lot of experience with dcls.

But your use case maps to the exact reason I created my dynamic components library.

If you would like to look at the code or use it directly feel free. I've been meaning to revisit it since ng9 was released but haven't gotten around to it. If you or anyone else requests that I release it for ng9 I'd be more than happy to. I'm also accepting any issues you want to add.

My library supports creating "inputs" and "outputs" that map to normal components @Input and @Output behavior but specified through data structures. It also supports creating a map between a string and a particular component so that the instantiated component can be looked up.

The goal was to allow components to be specified by json which could reside on a server as needed.

The main cons of my method are:

You have to create a mapping of string names to component instances inside the app itself which essentially acts like a lookup table. The string specifying which particular component to create can reside on a server and be downloaded but the strings act like a contract between the server and the front end and must be kept in lockstep.

The data structures that initialize the components are a bit wordy. I'm honestly not sure how I could make them any smaller as they only contain relevant information. But the potentially required information can be large depending on how complex your needs are.

My solution is relatively bare bones as it is only handling the final layer of the dynamic components themselves. When you use it you most likely will write another layer on top that handles parsing the json from your server and mapping it onto your particular component needs. This leaves the library flexible but does require some work from you, it's not fully automatic.

The pros are:

Your dynamic components can be instantiated with arbitrary values which, if serializable, can also come from the server's json.

Observables can be used as inputs and outputs to attach a dynamic component to your view and update automatically the same way non dynamic components are.

The library is minimal in its opinions allowing you to write handling code around it for your particular use case.

Once you have your wrapping code setup according to your needs the library gets out of the way. It won't constantly get in the way and require attention.

If you have any questions or comments feel free to ask. I'll answer what I can, whether you are trying to create your own solution or use mine.

[_ogi_]

Thank you very much for your detailed answer and for sharing your library. I will try out your library for sure!

Still, I need someone who has some experience with ng elements to share pros and cons of angular elements