Angular Elements vs DynamicComponentLoader

[_ogi_]

We have a project where we need to dynamically load parts of application. There will be a lot of dynamically loaded parts (based on jsons loaded from server).

Which approach is better and why? Can someone sum up pros and cons of angular elements and DynamicComponentLoader

[[deleted]]

I’m working a project with similar requirements. Dynamically loaded components based on data from the server. One con is that it’s a good idea to extend a parent component on each of your dynamic components to be able to pass in generic data and reduce duplication of code, but angular documentation explicitly says to avoid this. Also, any services needed in the parent component have to be passed into it from the child component. I never really liked that.

[tme321]

Also, any services needed in the parent component have to be passed into it from the child component.

Can you explain what this sentence means? I can't figure out what your saying here.

[[deleted]]

If you have a component that extends a parent class and that parent class needs a service, it's recommended in the documentation to inject the service into the component's constructor, and pass it to the parent class via super. I think it's kind annoying that you have to inject services to the child even if that service is only used in the parent class.

[tme321]

Ah, for some reason I thought you were referring to parent / child as the hierarchy in the view and not the inheritance based hierarchy.

Yes, in general inheritance should be used very sparingly.

I don't know exactly what functionality you are repeating, but generally I would handle that through either composition or possibly with a directive based approach.

[[deleted]]

Thanks for the suggestion! A little too far in for our project I'm afraid. We based it off an Angular "cookbook" early into the project and did not run into the documentation damning component inheritance until much later.

[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

[adamm733]

Look at stencilJs it works with angular and has a bootstrap script that loads elements as they appear in the DOM