Dynamic Dashboard with Angular Elements and Web Components
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode first commit Jul 3, 2018
e2e first commit Jul 3, 2018
projects/external-dashboard-tile only use ngx-charts in main app Jul 7, 2018
src only use ngx-charts in main app Jul 7, 2018
.editorconfig first commit Jul 3, 2018
.gitignore first commit Jul 3, 2018
README.md readme Jul 6, 2018
angular.json first commit Jul 3, 2018
angular.json.bak first commit Jul 3, 2018
img.png only use ngx-charts in main app Jul 7, 2018
karma.conf.js first commit Jul 3, 2018
notes.txt first commit Jul 3, 2018
package-lock.json first commit Jul 3, 2018
package.json first commit Jul 3, 2018
protractor.conf.js first commit Jul 3, 2018
tsconfig.json first commit Jul 3, 2018
tslint.json first commit Jul 3, 2018

README.md

Angular Elements Dashboard Demo

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

Show Case

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