manfredsteyer / angular-elements-dashboard

Dynamic Dashboard with Angular Elements and Web Components

Angular Elements Dashboard Demo

Shows how to dynamically load and create Angular Elements (Custom Elements, Web Components).

Features:

• Dynamically create app-internal Angular Elements
• Lazy load app-internal Angular Elements
• Load external Custom Elements

Remarks:

• The external Custom Element is built with ngx-build-plus
• The example uses the @webcomponents/custom-elements polyfill (see references in angular.json and polyfills.ts)
• For lazy loading without the router, the lazy module is also mentioned in angular.json.
• External Components will become much smaller when ngIvy arrives (planned for Angular 7)
• For sharing dependencies b/w components, lookup ngx-build-plus

Start

Build the external Custom Elements project before starting the main project:

npm install
npm run build:ce
npm start

Trainings and Consultancy

If you need help with implementing huge Angular applications, feel free to reach out to us. We offer trainings, workshops, and consultancy for Angular.

---

German Translation: Falls Du Hilfe bei der Umsetzung gro0er Angular Anwendungen beötigst, kannst Du Dich gerne bei uns melden. Wir bieten Schulungen, Workshops und Beratung zu Angular.

angular-elements-dashboard's Issues

Routing between two customElements

Hi,

I wanna ask you, how i cant implemente routing insde each customElements and the posibility of routing outside of a customElements.

Any idea?

Tks

IE 10 support?

Angular elements can not work on IE 10 ,any solutions?

IE11 issues

My client needs to support IE11... :( Do you see any problem using basic functionalities of Angular Elements with IE11 based on your experience? I'll be more than interested to hear from you. Also, with a fresh installation of your app I got this from the IE11 console:

Support external libs

Hi,

i used this example to get the "loading external components" to work. This works now fine and thank you for the very good example. But I'm struggeling a little bit with the internationalization. I use the ngx-translate lib for doing this, but unfortunately the text in the external component is not translated. Is there any way to get it to run? Am I doing something wrong?

Thank you in advance.

Fetch elements via http request

Hi!

Is i possible to fetch and load the elements on demand from an http resource?
My goal is to have one Angular application, which i don't have to build each time when a new Form/Component/Element is needed.
The urls to the Elements are store in a Database(and maybe also to element code).
Each time a new Element was created, i publish it to an http resource and add the url to the Database.
In the Angular Application i can select an item from the list, and this item will be fetched, loaded und displayed...
Is such a Scenario possible???

Br
Bernhard

I had to create an issue to thank you.

Keep going very going documentation for me!

external-dashboard-tile no longer working after upgrade to ng7

After upgrade to ng7 the external-dashboard-tile, no longer is visible when added.
Do you have an idea what the issue is?
I'd like to use the latest version of ngx-build-plus, and need the use case of loading the custom element in the same way the external-dashboard-tile is loaded in this example.