This is a demo for Angular Elements for a talk I gave at Devfest Rift Valley 2019. The talk title was Rich Web Components Using Angular Elements.
You can play with the demo for this well, demo, here.
ng build --prod
You can skip the --output-hashing flag as I have set it permanently to none inside angular.json.
After building is complete, you can use Node to run the concat.js script which combines the build artifacts into a single JS Script essay to use with your index.html.
node concat.js
I will share more scripts for achieving the same, from different scripting languages such as bash.
If you use the concat.js to concat the files, the three final artifacts will be put inside the output dir at root of this project.
You can then use the web components as follows inside any HTML.
First, Import the the three build artifacts into you HTML File.
Inside Header, Import the CSS:
<head>
<link rel="stylesheet" href="./styles.css">
</head>And then, inside the body, just next to the body closing tags import the JS:
<script src="./ng-es5.js" nomodule></script> <!-- ES5 Import -->
<script src="./ng-es2015.js" type="module"></script> <!-- ES2015 Import (Smaller Bundle) -->And then, you can use the Web Components:
To add todos:
<add-todo placeholder="Buy Bread, ..."></add-todo>To List Todos:
<list-todos></list-todos>The add-todo component also produces an event, incase the todo text is empty. You can listen to that also:
const el = document.querySelector('add-todo');
el.addEventListener('onerror', (event) => {
// do something when there is an error
alert(event.detail);
});