Angular 4 Dynamically Create Component from User Definable input

Question

I'm looking to build an App in Angular 4 that would allow components to be dynamically created from storage (database, url, server stored file). The goal is to allow users to build there own components to create custom dashboards to view data.

I've been looking through google and stackoverflow to see if something like this has been achieved, but I have not seen anything to point me in the right direction.

If this is possible would anyone be willing to explain or link me to a resource to help me get started on this?

Thank you in advance

Do you expect your users to define just strings or full component classes wrapped into Angular module? Here is the most detailed article on dynamic components to get you started Here is what you need to know about dynamic components in Angular — Max Koretskyi
– Max Koretskyi, Commented Jan 5, 2018 at 8:00
Honestly, in an ideal world a blob file of the component would exist in the database (or a string of its contents would work too). I'm entertaining the thought of a API that creates a file and saves to a directory accessible by the Angular 4 app. My only concern with that method is preventing users from accessing files that aren't theirs effectively. — duffmanseven
– duffmanseven, Commented Jan 5, 2018 at 14:56
who's going to define a class for a component? where will it be placed? — Max Koretskyi
– Max Koretskyi, Commented Jan 5, 2018 at 15:34
Say a user wants the ability to display a custom dashboard with widgets. They would need to define a component that retrieves data and potentially parse it. Their template would then access the data retrieved and display it to their liking. Where this information is placed is the million dollar question. I don't want users to be able to access components that aren't theirs. — duffmanseven
– duffmanseven, Commented Jan 5, 2018 at 16:32

Hung Tran · Accepted Answer · 2018-01-05 00:09:44Z

1

You can check these out:

I prefer number 1 because it provides a very detailed & clear guide.

answered Jan 5, 2018 at 0:09

Hung Tran

3651 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

duffmanseven Over a year ago

Thanks for answering! I took a look at one and it is helpful. I'm curious as to how to import the dynamic module from database or arbitrary file storage? Would the web server need to generate a file for the Service loader to import?

Hung Tran Over a year ago

No worries. I don't think it's possible to import a dynamic module stored in a database into frontend. I only saw my colleagues store different templates in a database.

duffmanseven Over a year ago

Thank you for your answer, I'll leave this unanswered to see if anyone else has anything to chime in before Friday. I suppose a easy solution would be to create an interface in which users components are stored into a file store accessible by the server. My only concern is making it where users can't access other users files.

Collectives™ on Stack Overflow

Angular 4 Dynamically Create Component from User Definable input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related